Jquery: How to allow only numbers/float with comma (even when copy-pasted) in input text field using jQuery?

Question

This is my code, it is not working properly. It can be duped with "+++" or "---". I can prevent that but it is just increasing the validation. Is there any better way? Can the code be optimized?

var regexNumber = /^\$?(((\d)\,?)+)?((\d)+)(\.(\d)+)?$/;
$("#" + element).keydown(function (event) {

                        // Allow only backspace, delete, dot, arrow key, tab, shift+tab
                        if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190 || (event.keyCode>=37 && event.keyCode<=40) || event.keyCode==9 || event.keyCode==16) {
                            // let it happen, don't do anything                           
                        }
                        else {
                            // Allow copy, paste, select all only numbers 
                            if (((event.keyCode == 65 || event.keyCode == 86 || event.keyCode == 67) && (event.ctrlKey === true || event.metaKey === true))) {
                                if (event.originalEvent.clipboardData.getData('Text').match(regexNumber) == null) {
                                    event.preventDefault();
                                }
                            }
                            // Ensure that it is a number and stop the keypress

                            if (event.keyCode < 48 || event.keyCode > 57) {
                                event.preventDefault();
                            }
                        }
                    });

It should not allow: 1. Letters 2. Pasting data having letters

It should allow: 1. Digits with comma 2. Float 3. Tab, Shift+Tab 4. Ctrl + A, C, X, V 5. Backspace, Delete 6. Arrow keys 7. Pasting of data with comma and float

I think a regex to check letters and special characters except (.(dot) and ,(comma)) in a string and not allow them would work fine? But I don't what the regex should be?

I don't have much idea about regex.

I looked for similar questions, they were missing some cases from my validation.

The KNVB · Accepted Answer · 2020-04-03T10:11:04.653

1

This is my solution:

 <html>
  <head>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script>
    var blackList=/[a-zA-Z]+/g;
    var whiteList=/[\d,\.]+/g;
    $( document ).ready(function() {
     $("#inputBox").keypress(function (event) {
      return (event.key.match(whiteList)!=null)
     });
     $("#inputBox").on("paste", function(e){
      var pasteData = e.originalEvent.clipboardData.getData('text');
      return (pasteData,pasteData.match(blackList)==null);
     });
    });
    
   </script>
  </head>
  <body>
   <textarea>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
   </textarea><br>
   <textarea id="inputBox">
   </textarea>
   <div id="result">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
   </div>
  </body>
 </html>

I capture "onkeypress" event to check keystroke. Furthermore, I capture the "onpaste" event to prevent the user input character from the clipboard.

It is because I do not block the input character by key code, so the special character (e.g. ctrl-c) should not be affected.

According to the jQuery documentation,

The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.

edited Apr 03 '20 at 10:11

answered Apr 03 '20 at 08:23

The KNVB

3,588
3
29
54

Are you checking a-z and A-Z only? It should also check for all special characters except dot and comma. – Kishan Kumar Gupta Apr 03 '20 at 08:38
I tested the code, it allows dot and comma to pass the checking, what special characters do you want to block? By the way, please the above code first. – The KNVB Apr 03 '20 at 08:40
According to your requirement, I changed the code, please check – The KNVB Apr 03 '20 at 08:56
I think backspace,arrow, tab, ctrl keys are not working – Kishan Kumar Gupta Apr 03 '20 at 09:08
I tried it. You have allowed digits, dot and comma. But control keys are not working. – Kishan Kumar Gupta Apr 03 '20 at 09:11
Can you post your code? I post my solution the above. I can use control key in the second text box. – The KNVB Apr 03 '20 at 09:18
In your textbox. I can paste strings. Can you check this? – Kishan Kumar Gupta Apr 03 '20 at 09:56
Sorry, I updated the code again, I am watching the second textarea, it should be OK now. Please check it. – The KNVB Apr 03 '20 at 10:04
And hmmm..., would you tell me which browser you are using? – The KNVB Apr 03 '20 at 10:07
Everything is working as expected. But can we also take care of the logic that more than one dot or comma is invalid? Thank you for the help – Kishan Kumar Gupta Apr 03 '20 at 10:24
I am using Chrome – Kishan Kumar Gupta Apr 03 '20 at 10:24
You may refer:https://stackoverflow.com/questions/5963158/html5-form-input-pattern-currency-format – The KNVB Apr 03 '20 at 10:35
Sorry, @The KNVB, I am not able to find the solution. As 2 dots in a digits, I have to iterate in the number as regex can't do as we have to validate on keypress. Regex will check only when we are pasting the data, there it can detect 2 dots. But what about when key pressing how to stop dot if it is already entered. – Kishan Kumar Gupta Apr 03 '20 at 11:26
is the dollar sign allowed? – The KNVB Apr 03 '20 at 11:33
I solved the dot thing using this else if (event.keyCode == 46 && this.value.split('.').length === 2){ event.preventDefault(); } – Kishan Kumar Gupta Apr 03 '20 at 12:07

Jquery: How to allow only numbers/float with comma (even when copy-pasted) in input text field using jQuery?

1 Answers1