Input field should accept only number and maxlength=10, without using pattern, is not working in MACBOOK

If I use pattern ctrl+A, Ctrl+v is not working in mac book.
So i tried to use attributes: {maxlength: 10, type: “Number”}, but this 2 property doesnot apply together. Please let me know the solution.

Hello @sudhesh15 ,

The maxlength attribute works just as the same HTML input tag property. Unfortunately, as you can see here, it does not work with input type=“number” . So, the problem is not on the Webix side.

As a workaround, you can use this variant: Code Snippet .

Hello @sudhesh15

As you have specified, maxlength attribute does the job of limiting characters to 10. But to allow only digit you have used pattern property with mask and allow as sub-attributes. pattern property is causing problem in macOS for some reason, we need need to manually modify content of text field on keypress event by manually eliminating unwanted characters.

This is shown in the below code snippet:

webix.ui({
  view: "text",
  type: "text",
  labelPosition: "top",
  attributes: {maxlength: 10},
  on: {
    onTimedKeyPress: function() {
      let value = this.getValue();
      value = value.replace(/\D/g, '');
      value = value.substring(0,10)
      this.setValue(value);
    },
  },
},);

This snippet is bit similar to the answer provided by @MariyaDemy. Difference is here I used onTimedKeyPress event to run the callback after the pressed key is saved in the text field. Hence it allows any characters to type, but modifies to valid form soon after typing.

1 Like

Thank you shawn, this answer worked for me. #reach++