Filter characters entered in input
I received a fairly standard task: filter the characters entered by the user into input, that is, the user can enter a set of numbers and letters in the string, for example, '5s68d.4r55e.6t5', and I must send the correct amount of rubles to save to the server '568,455' (rubles).
I coped with the task rather quickly, having hung on the focusout input event, but my solution had some important drawbacks: where in this example does the ruble amount end and the pennies start? If the user enters several minuses (negative values are also correct in this case), which of the minuses should be considered the beginning of the line? And so on.
Therefore, a second version of the script appeared with regular expressions for the keyup event:
But as it turned out, this method had a noticeable flaw (I do not mean that the user sees the character that enters and then this character disappears), namely - if you put the cursor, for example, in the middle of the entered number in input, enter a letter, then the script will cut out the letter, but throw courses at the end of the line.
')
For this reason, the senior comrade instructed to write a function on the keypress event. After 30 minutes, the third version of the function was ready and it looked like this:
The code is taken from steckoverflow, but my code was not much different from the example above.
Everything looked beautiful - the user does not see the input numbers and the cursor does not move to the end of the line, but as it turned out, we were happy early. If you look at the keycode of keys on different operating systems (mac, linux, win), they have some differences, and if we add to this the fact that not all Macs have numPud and, therefore, numbers are entered with a clamped cipher and also numbers can is entered from the virtual keyboard. The result is a code many times larger than the last example.
As a result, I wrote a script for the keyup event and it worked with the only drawback - the user sees the input number for a second. For obvious reasons, I can not put the script, but this situation prompted me to write a new script, which I posted on github . I made the script more universal - now it is more designed to transfer the value to DOM elements than to modify the entered value in input (this will be the next step).
At the time of this writing, several parameters can be passed to the function:
Thanks for attention!
I coped with the task rather quickly, having hung on the focusout input event, but my solution had some important drawbacks: where in this example does the ruble amount end and the pennies start? If the user enters several minuses (negative values are also correct in this case), which of the minuses should be considered the beginning of the line? And so on.
Therefore, a second version of the script appeared with regular expressions for the keyup event:
$(e.curretTarget).val(($(e.currentTarget).val()).replace( /[^0123456789.-]/, '' )) But as it turned out, this method had a noticeable flaw (I do not mean that the user sees the character that enters and then this character disappears), namely - if you put the cursor, for example, in the middle of the entered number in input, enter a letter, then the script will cut out the letter, but throw courses at the end of the line.
')
For this reason, the senior comrade instructed to write a function on the keypress event. After 30 minutes, the third version of the function was ready and it looked like this:
function() { return this.each(function() { $(this).keydown(function(e) { var key = e.charCode || e.keyCode || 0; // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY // home, end, period, and numpad decimal return ( key == 8 || key == 9 || key == 13 || key == 46 || key == 110 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)); }); }); }; The code is taken from steckoverflow, but my code was not much different from the example above.
Everything looked beautiful - the user does not see the input numbers and the cursor does not move to the end of the line, but as it turned out, we were happy early. If you look at the keycode of keys on different operating systems (mac, linux, win), they have some differences, and if we add to this the fact that not all Macs have numPud and, therefore, numbers are entered with a clamped cipher and also numbers can is entered from the virtual keyboard. The result is a code many times larger than the last example.
As a result, I wrote a script for the keyup event and it worked with the only drawback - the user sees the input number for a second. For obvious reasons, I can not put the script, but this situation prompted me to write a new script, which I posted on github . I made the script more universal - now it is more designed to transfer the value to DOM elements than to modify the entered value in input (this will be the next step).
At the time of this writing, several parameters can be passed to the function:
- forDisplay: true, // for display in divs
- classOfDomElement: '', // classes of DOM elements separated by commas without spaces
- idOfDomElement: '', // id DOM elements separated by commas without spaces
- // forInput: false,
- forSave: false, // function forSave - returns only digits with a dot
- negative: false,
- afterPoint: 2, // number of digits after point
- showPoint: true, // show point before entering cents
- currency: 'rub.' // currency
Thanks for attention!
Source: https://habr.com/ru/post/312902/
All Articles