CODEWITHSUNDEEP
javascriptjqueryhtmlfirefox
Brendan Jackson
Brendan Jackson

Reputation: 315

Firefox compatible input filtering

I'm trying to prevent most special characters (with the exception of "_" and "-") from working on a text input field.

I started with doing a regex filter by pattern(didnt work), then by dynamic js, later to find out that it wouldn't work on firefox, I coudldn't use the dashes, underscores, backspace, delete, or arrow keys even though it showed I could on https://regexr.com/

I found another solution that actually prevented the keypress by using the ascii tables, sounded great as well but now I still can't use underscores or dashes though the my logic seems fine and the keys aren't logged. 

<input id="directory" type="text">

$("#directory").keypress(function(e){
var keyCode = e.which;

/*
48-57 - (0-9)Numbers 65-90 - (A-Z) 97-122 - (a-z) 8 - (backspace)
*/
if (
   !(
     (keyCode == 8 )
     ||(keyCode == 45)
     ||(keyCode == 95)
     ||(keyCode >= 48 && keyCode <= 57)
     ||(keyCode >= 65 && keyCode <= 90)
     ||(keyCode >= 97 && keyCode <= 122)
   )
 ){
 e.preventDefault();
 $("#directory").val('')
 console.log(keyCode);
  toastr.error("Your search string contains illegal characters.  Please use, a-z, A-Z, 0-9, -, or _", "Error", {timeOut: 10000, preventDuplicates:true, positionClass : "toast-top-center"}); 
  }
});

edit: the inverse of this didn't work either of course

 if (
   (
     (keyCode >= 0 && keyCode <= 7)
     ||(keyCode >= 9 && keyCode <= 44)
     ||(keyCode >= 46 && keyCode <= 47)
     ||(keyCode >= 58 && keyCode <= 64)
     ||(keyCode >= 91 && keyCode <= 94)
     ||(keyCode == 96)
     ||(keyCode >= 123 && keyCode <= 127)
   )
){

I'm not sure why, but 45 and 95 still wont let me enter underscores or dashes, can anyone help me, the solution I want is a-z, A-Z, 0-9, -, _ input?

Upvotes: 0

Views: 24

Answers (2)

trincot
trincot

Reputation: 350310

I would suggest to not depend on keydown, as it will not fire when you paste content with the context menu (for example). To get an event fired for any change applied by the user, use the input event.

The downside of that event is that it cannot be cancelled. But it is not too difficult to undo the (part of the) change that has invalid characters in it.

Here is how it could work:

$('#directory').on('input', function (e) {
    var i = $(this).val().search(/[^\w-]/);
    if (i < 0) return; // All OK
    $(this).val($(this).val().replace(/[^\w-]/g, ''));
    this.setSelectionRange(i, i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="directory" type="text">

My opinion is that such blocking of characters is actually user-unfriendly: people might for a moment think their keyboard is malfunctioning. It is probably better to allow the characters to be typed, but to give a visual indication that the input is not valid, for example with a red border and an accompanying message.

Upvotes: 1

theGleep
theGleep

Reputation: 1187

It was a logic inversion issue ... all of the || allowed for characters you didn't want to "slip through". I removed the !() part and just returned from the event handler when an allowed key was typed:

var $output = $("#output")

$("#directory").keypress(function(e) {
  var keyCode = e.charCode;

  /*
  48-57 - (0-9)Numbers 65-90 - (A-Z) 97-122 - (a-z) 8 - (backspace)
  */
 
    if (
      (keyCode == 8) ||
      (keyCode == 45) ||
      (keyCode == 95) ||
      (keyCode >= 48 && keyCode <= 57) ||
      (keyCode >= 65 && keyCode <= 90) ||
      (keyCode >= 97 && keyCode <= 122)
    ) return
    
    e.preventDefault();
    $("#directory").val('')
    console.log(keyCode);
    $output.text("Your search string contains illegal characters.  Please use, a-z, A-Z, 0-9, -, or _");
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="directory" type="text">

<pre id="output"></pre>

Upvotes: 0

Related Questions