JS validation allow letters and specific symbol only + change input

Question

I am using a JS solution to allow letters and backspace only. I want to add more options to the input, but can't see to find the right solution.

My Code:

<input id="inputTextBox">

  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0)) { 
            event.preventDefault(); 
        }
        console.log(inputValue);
    });
});

This give me the correct result of only letter input and use of backspace. For the correct user experiece I need to add the following.

Allow input '?' , '*' and 'spacebar'.

And if possible, change the input in the form when the user typ. So if a user typ a '?' or 'spacebar', it changes into the value '*' automatic.

Thanks in advance.

user120242 · Accepted Answer · 2020-05-29T10:39:20.533

Slightly modified from this solution:
How to allow only numeric (0-9) in HTML inputbox using jQuery?

EDIT: added code to preserve position when ? and spaces are replaced

// Restricts input for the set of matched elements to the given inputFilter function.
// Modified to pass element to callback function
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

$(document).ready(function(event) {
  $("#inputTextBox").inputFilter(function(el) {
    var oldSelectionStart = el.selectionStart;
    var oldSelectionEnd = el.selectionEnd;
    var oldValue = el.value;
    el.value = el.value.replace(/[* ]/g, '?'); //replace * space with ?
    el.value = el.value.replace(/[^a-zA-Z?]/g, '');
    if (oldValue != el.value)
      el.setSelectionRange(oldSelectionStart-(oldValue.length-el.value.length), oldSelectionEnd-(oldValue.length-el.value.length));
    return /^[a-zA-Z?]+?$/.test(el.value); // alphabet question only
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">

I was cheering to soon as the code does not work on mobile devices as other than alphabet can still be input. — Kees, May 26 '20 at 10:19
Thanks user120242, this is working. I have made one mistake in my question, How to change * and 'spacebar' into '?' instead of in too *. My edit with el.value.replace doesn't seem to work. — Kees, May 29 '20 at 10:14

Arun Raj · Answer 2 · 2020-05-23T04:58:39.557

Simply added a keyup function to replace the character '?' and space to * and also added envent ids of space and '?' in your keypress function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputTextBox">
<script>
  $(document).ready(function(){
    $("#inputTextBox").keypress(function(event){
        var inputValue = event.which;
        if(!(inputValue >= 65 && inputValue <= 123) && (inputValue != 32 && inputValue != 0 && inputValue != 63 && inputValue != 42 && inputValue != 32)) { 
            event.preventDefault(); 
        }
    });
     $("#inputTextBox").keyup(function(){
        var inputTxt =  $('#inputTextBox').val();
        inputTxt = inputTxt.replace('?', '*').replace(' ', '*')
          $('#inputTextBox').val(inputTxt); 
     });
});
</script>

Simon · Answer 3 · 2020-05-22T09:34:38.117

You have an issue with your code already since the 65 - 123 contains letters, but it also contains [] _ to name a few.

so you probably want 65-90 for A-Z then 97-122 for a-z 48-57 for 0-9. then check each character you want to allow, they probably wont be in a range.

If you look at the ascii chart here https://theasciicode.com.ar/ascii-printable-characters/question-mark-ascii-code-63.html you will see all the numbers you need to include (or exclude)

On the keyUp event, you could look at the value and then change the last character to the * if you wish, but remember that will change the actual value, not just mask it.

If you want it masked, you should use an <input type="password"> field, which has that behaviour by default.

JS validation allow letters and specific symbol only + change input

3 Answers3