CODEWITHSUNDEEP
javascripthtml
Riski Febriansyah
Riski Febriansyah

Reputation: 437

I can't use backspace and del in textbox (Mozilla)

I have a problem with textbox validation using JS. This my source:

$(document).ready(function() {
  $("#letnd").keypress(function(e) {

    var regex = new RegExp("^[a-zA-Z]+$");
    var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);

    if (!regex.test(key)) {
      e.preventDefault();
      return false;
    }
  });

  $("#letnb").keypress(function(e) {
    var regex = new RegExp("^[a-zA-Z]+$");
    var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (!regex.test(key)) {
      e.preventDefault();
      return false;
    }
  });
});
<input id="letnd" type="text" name="txtnd" />
<input id="letnb" type="text" name="txtnb" />

In other browsers, this code works fine. But why, when I open it in Mozilla, the textbox can't use backspace and del?

Upvotes: 2

Views: 2900

Answers (2)

Bugs Bunny
Bugs Bunny

Reputation: 2674

Try 

$(document).ready(function () {
    $("#letnd").keydown(function (e) {

        var regex = new RegExp("^[a-zA-Z]+$");
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);

        console.log(e.keyCode); // check for backspace, delete etc. keyCodes you need

        if (e.keyCode != 8) { // e.g: backspace keyCode for Backspace on OS X
            if (!regex.test(key)) {
                e.preventDefault();
                return false;
            }
        }
    });
});

and get the idea.

Consider checking (aka regexing) the whole new value of input rather then dealing with single keypress or keydown / charCode or keyCode, if possible. You will avoid dealing with different keyCodes of same keys on different platforms, deleting, backspacing, Ctrl+R / CMD+R for browser refresh, Ctrl+P / CMD+P for print dialogue, ...

Upvotes: 0

Kaiido
Kaiido

Reputation: 136638

Other browsers don't fire keypress event when you press backspace or arrows and maybe some other keys, while FF does. Don't know who is right there. If you replace the keypress event to keydown, every browsers will act as FF.

According to specs :

The keypress event is traditionally associated with detecting a character value rather than a physical key, and might not be available on all keys in some configurations.

Also worth to be mentionned that keypressEvent is now deprecated in DOM3. beforeinput should be used but is not yet implemented in any major browsers, mostly because specs aren't clear about that. related chromium bug report.

What you could do however, is to check the value of your <input> element on keyup and if there is some forbidden chars, remove them. One small caveat is that forbidden char will appear before it's been deleted : 

$(document).ready(function() {
  $("#letnd").keyup(validate);

  $("#letnb").keyup(validate);
});

function validate(e) {

  var regex = new RegExp("[^a-zA-Z]","g");
  var string = this.value;

  var match = string.match(regex);
  if (match) {
    this.value = this.value.replace(regex, '');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="letnd" type="text" name="txtnd" />
<input id="letnb" type="text" name="txtnb" />

Upvotes: 2

Related Questions