All geek questions in one place

How to prohibit input of invalid characters in input fields

Onkeydown , I run the following JavaScript:

 function ThisOnKeyDown(el) { if (el.title == 'textonly') { !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null; } if (el.title == 'numbersonly') { !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null; } if (el.title == 'textandnumbers') { !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null; } }

One of these three header attributes is assigned to the various input fields on the page. The code works until the invalid characters are correctly erased, but not until the next character is entered. I want to find a way to simply discard invalid input in the first place. I appreciate your help!

Change I create events globally. Here is how I do it:

  function Globalization() { var inputs = document.getElementsByTagName('input'); for (i = 0; i < inputs.length; i++) { inputs[i].onfocus = createEventHandler( ThisOnFocus, inputs[i]); inputs[i].onblur = createEventHandler( ThisOnBlur, inputs[i]); inputs[i].onkeydown = createEventHandler( ThisOnKeyDown, inputs[i]); inputs[i].onkeyup = createEventHandler( ThisOnKeyUp, inputs[i]); } }

Globalization() is executed by body.onload

Therefore, a typical input field contains HTML without calling functions like this:

  <input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>
+6
source share
6 answers

To prevent it from being installed in the first place, you can return false to the keydown event handler, thereby preventing further propagation of the event.

I wrote an example below using jQuery, but you can use the same function with traditional binding.

Although server-side validation is also important, client-side validation is important for user convenience.

 $("input.number-only").bind({ keydown: function(e) { if (e.shiftKey === true ) { if (e.which == 9) { return true; } return false; } if (e.which > 57) { return false; } if (e.which==32) { return false; } return true; } });
+13
source

I found this solution at: http://help.dottoro.com/ljlkwans.php

works as intended.

 <script type="text/javascript"> function FilterInput (event) { var keyCode = ('which' in event) ? event.which : event.keyCode; isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) || (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */); modifiers = (event.altKey || event.ctrlKey || event.shiftKey); return !isNumeric || modifiers; } </script> < body> The following text field does not accept numeric input: <input type="text" onkeydown="return FilterInput (event)" />< /body>

it allows you to use text and! "# $% &, but you can configure it by adding them to validation to resolve numbers by deleting! in return

+1
source

The code is useful for preventing the user from entering any character other than a number.

 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function keyispressed(e){ var charval= String.fromCharCode(e.keyCode); if(isNaN(charval)){ return false; } return true; } </script> </head> <body> <input type="text" onkeydown="return keyispressed(event);"/> </body> </html>
+1
source

The code above says that it allows you to use ONLY numbers. You can change it by adding an exception like BACKSPACE like

 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> function keyispressed(e){ var charval= String.fromCharCode(e.keyCode); if((isNaN(charValue)) && (e.which != 8 )){ // BSP KB code is 8 e.preventDefault(); } return true; } </script> </head> <body> <input type="text" onkeydown="return keyispressed(event);"/> </body> </html>
+1
source

Run your code against the onkeyup event, not the onkeydown event. Thus, you can access the last last keystroke when the onkeyup event is executed when the key is pressed, without knowing its result.

0
source 
 $('.key-filter').keypress(function () { if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault(); });

then add the key filter class to your input if using jquery or

 <input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />

just enter the characters you want to allow inside [] after ^. this allows all letters of numbers _ - and.

0
source

Source: https://habr.com/ru/post/902464/

More articles:


All Articles