Print Page - how to use keypress on numberbox

Title: how to use keypress on numberbox
Post by: neos on December 23, 2014, 11:45:24 PM

Dear All,

I have a little problem.
How i use a keypress action on numberbox.
If i use texbox its works but not in numberbox

Code:

$(function(){    
        $('#password').textbox('textbox').keypress(function(e){
            if (e.keyCode == 13){
                $('#submit-login').focus();
            }
        });
    });

Title: Re: how to use keypress on numberbox
Post by: jarry on December 24, 2014, 12:25:36 AM

Please try this:

Code:

$('#n1').numberbox({
	inputEvents: $.extend({}, $.fn.numberbox.defaults.inputEvents, {
		keypress: function(e){
			var result = $.fn.numberbox.defaults.inputEvents.keypress.call(this, e);
			if (e.keyCode == 13){
				$('#submit-login').focus();
			}
			return result;
		}
	})
})

Title: Re: how to use keypress on numberbox
Post by: phunksta on January 29, 2015, 05:19:22 AM

Hello, I'm struggling with this too!

On keypress I want a certain key '#' to be able to fill the field with a hash, even though it is a numberbox.
I have an icon that does the same thing, this works fine.
I can't however get the keypress event to set the hash. When the field loses focus the hash is removed from its value.

My code:

Code:

    var $yr = $('form#myform input.Year');
    if ($yr.length) {
        $yr.numberbox({
            icons: [
                {
                    iconCls: 'icon-hash',
                    handler: function (e) {
//this works fine
                        $(e.data.target).textbox('setValue', '#');
                    }
                }
            ],
            inputEvents: $.extend({}, $.fn.numberbox.defaults.inputEvents, {
                keypress: function (e) {
                    var result = $.fn.numberbox.defaults.inputEvents.keypress.call(this, e);
                    if (e.keyCode == 35) {
//this doesn't work
                        $(e.data.target).textbox('setValue', '#');
                    }
                    return result;
                }
            })
        });
    }

Can you help?

Title: Re: how to use keypress on numberbox
Post by: jarry on January 29, 2015, 07:10:00 PM

If you want to let the numberbox accept the '#' character, please override the 'filter' function. You may also need to override the 'parser' and 'formatter' functions.

Code:

$('#n1').numberbox({
    filter: function(e){
    	if (e.keyCode == 35){  // #
    		return true;
    	} else {
    		return $.fn.numberbox.defaults.filter.call(this, e);
    	}
    },
    // ...
})

Title: Re: how to use keypress on numberbox
Post by: phunksta on January 30, 2015, 03:35:15 AM

You guys are superstars! ;)

I ended up with this - quirk is that # is not an 'allowed char' in this field rather a shortcut for setting its value to a single hash. This is just the way these users work and I had to recreate the same workflow!

Code:

$yr.numberbox({
            icons: [
                {
                    iconCls: 'icon-hash',
                    handler: function (e) {
                        $(e.data.target).textbox('setValue', '#');
                    }
                }
            ],
            filter: function (e) {
                if (e.keyCode == 35) {  // #
                    $(e.data.target).textbox('setValue', '');
                    return true;
                } else {
                    return $.fn.numberbox.defaults.filter.call(this, e);
                }
            },
            parser: function (s) {
                if (s === "#") {
                    return s;
                } else {
                    return $.fn.numberbox.defaults.parser.call(this, s);
                }
            },
            formatter: function (v) {
                if (v === "#") {
                    return v;
                } else {
                    return $.fn.numberbox.defaults.formatter.call(this, v);
                }
            }
        });

Does that look like what you meant?

EasyUI Forum

General Category => General Discussion => Topic started by: neos on December 23, 2014, 11:45:24 PM