想要通过在用户输入错误时阻止用户在文本字段中输入任何空格

Question

I have a textfield in Extjs. This textfield can only contain

• Digits 0 - 9
• Alphabets az or AZ
• Characters like _ (underscore) and - (hyphen)

I want to prevent the user from entering anything apart from these characters. As such I wish to display an error, something like a red underline along with helptext to notify the user as to why the error is there.

Kindly advice as to how to go about preventing the user from entering anything apart from the above characters and also displaying the error message.

Answer 1

Use maskRe property:

An input mask regular expression that will be used to filter keystrokes (character being typed) that do not match. Note: It does not filter characters already in the input.

maskRe: /[A-Za-z0-9\-_]/

Working example: https://fiddle.sencha.com/#fiddle/o4b

Answer 2

Something like this. There are a whole load of issues with keypress and keydown on different browsers, but I believe this should work on most/all modern browsers without issue.

 var errorDiv = document.getElementById('error'), testInp = document.getElementById('test'); testInp.addEventListener('keypress', function (evt) { var code = evt.keyCode || evt.charCode; if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122 || code === 45 || code === 95) { errorDiv.classList.add('hidden'); } else { evt.preventDefault(); errorDiv.classList.remove('hidden'); } }, false); testInp.addEventListener('keydown', function (evt) { var code = evt.keyCode || evt.charCode; if (code === 8 || code >= 37 && code <= 40|| code === 46) { errorDiv.classList.add('hidden'); } }, false); 

 #error { color: red; } .hidden { visibility: hidden; } 

 <input id="test" type="text" /> <div id="error" class="hidden">As such I wish to display an error, something like a red underline along with helptext to notify the user as to why the error is there.</div> 

Answer 3

You can add an event keyup and check the input key value.

For example for a space:

listeners: {
        keyup: function(field, e) {
             var key = e.getKey(); 
             if (key == 32){
                 alert("Hey dude, what are you doing?");
             }
       }
 }

Or something else. You can take a look at:

field.addClass("x-form-invalid")
field.markInvalid("Hey dude, what are you doing?");

Hope this helps.