Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to set up a textfield to accept only numeric input?

  1. #1
    Touch Premium Member
    Join Date
    Dec 2011
    Posts
    41
    Vote Rating
    1
      0  

    Default How to set up a textfield to accept only numeric input?

    Hi,

    How can I do filtering on textfield input? For example how can I set up a textfield to accept only numeric input?

    Thank you.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    Use a Ext.field.Number instead.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102
    Vote Rating
    86
      1  

    Default

    in iOS mobile safari and other mobile webkit browsers, number field doesn't necessarily constrain input to numeric. it's absolutely not fully baked, much like other things in HTML5 across different browsers. >

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    Brazil
    Posts
    106
    Vote Rating
    0
      1  

    Default

    use function isNaN

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    3
    Vote Rating
    1
      1  

    Default Here is what you need to set the textfield to only allow number 0 to 9

    maskRe: /[0-9.]/,

  6. #6
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102
    Vote Rating
    86
      0  

    Default

    Quote Originally Posted by nigelskeels View Post
    maskRe: /[0-9.]/,
    That's not a touch option.

  7. #7
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      1  

    Default

    You can set the pattern attribute and even listen to keydown event. Here is an example I had to use for an app:

    Code:
    Ext.define('Ux.field.PatternText', {
        extend : 'Ext.field.Text',
        xtype  : 'patterntextfield',
    
        config : {
            pattern : '[0-9]*'
        },
    
        updatePattern : function(pattern) {
            var component = this.getComponent();
    
            component.updateFieldAttribute('pattern', pattern);
        },
    
        initialize : function() {
            this.callParent();
    
            var component = this.getComponent();
    
            component.input.on({
                scope   : this,
                keydown : 'onKeyDown'
            });
        },
    
        onKeyDown : function(e) {
            var code = e.browserEvent.keyCode;
    
            if (!(code >= 48 && code <= 57) && !(code >= 97 && code <= 105) && code !== 46 && code !== 8) {
                e.stopEvent();
            }
        }
    });
    You can of course make onKeyDown work for you, mine is a little verbose. It also stops copy paste
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Bologna, Italy
    Posts
    12
    Vote Rating
    0
      0  

    Default

    Try to set the 'pattern' attribute as [0-9]* of the element inside the field component once rendered by Sencha Touch.

    I have to do this way in Sencha Touch < 2 with textfield component in iOS (to force to show numeric pad) because with numeric component iOS trim leading zeroes and add decimal and thousand separators (which is not the best solution for fields as phone number or CAP)

  9. #9
    Sencha User pchan!'s Avatar
    Join Date
    Jun 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    thanks nigelskeels! Work for me.
    This is my(simple) phone field:
    Code:
    name: 'phone',
    fieldLabel: 'You phone here, please',
    allowBlank: false,
    itemId: 'phone',
    enforceMaxLength: true,
    minLength: '8',
    maxLength: '9', 
    maskRe: /[0-9.]/
    u u u!

  10. #10
    Sencha User pchan!'s Avatar
    Join Date
    Jun 2013
    Posts
    5
    Vote Rating
    0
      0  

    Default

    thanks nigelskeels! Work for me(in ExtJS).
    This is my(simple) phone field:

    Code:
    name: 'phone',
    fieldLabel: 'You phone here, please',
    allowBlank: false,
    itemId: 'phone',
    enforceMaxLength: true,
    minLength: '8',
    maxLength: '9', 
    maskRe: /[0-9.]/
    u u u!

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •