Prevent backspace from deleting in Jquery

Question

I have a text box. When a user presses the backspace button, I want to prevent the backspace from deleting text and to give a specific alert e.g. "Do you want to delete"? along with two buttons. Only when the user confirms the delete operation, the subsequent backspace button clicks would delete the texts.

I have written the below code. Though it works fine. but it is not able to prevent the backspace from deleting the text. Can anyone help me out in this?

$("#txtCustNameSHP").keyup(function (e) {
    var key = event.keyCode || event.charCode;
    if (keypresscount == 0 && key == 8 || key == 46) {
        event.preventDefault();
        $.uxMsg({
            title: "Confirmation",
            msg: "Do you want to delete the Shipper?",
            button1Text: "YES",
            button2Text: "NO",
            button1Click: function () {
                // CUSTOMER LOV
                //$("#" + txtCustCodeSHP).text("");                        
                keypresscount++;
            },
            button2Click: function () {
                return false;
            },
            width: "350px",
            height: "100px"
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtCustNameSHP" value="foobar" />

That sounds....truly awful. Are you aware of just how badly that's going to trip people up, particularly touch-typists? — T.J. Crowder, Feb 27 '17 at 13:03
Instead, you can use onblur event to check if the value is removed and alert the user for same. — Programmer, Feb 27 '17 at 13:06

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

issue 1: you should use keydown instead of keyup because keyup will be triggered after deletion already done

issue 2: your event is e not event

$("#txtCustNameSHP").keydown(function (e) {
  var key = e.keyCode || e.charCode;
  if (key == 8 || key == 46) {
      e.preventDefault();
      e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtCustNameSHP" value="foobar" />

With a Confirmation message:

$("#txtCustNameSHP").keydown(function(e) {
    var key = e.keyCode || e.charCode;
    if (key == 8 || key == 46) {
        if (typeof(dontDelete) == "undefined") {
            var r = confirm("You're about to delete!\nAre you sure?");
            if (r == true) {
                dontDelete = false;
            } else {
                dontDelete = true;
            }
        }
        if (dontDelete) {
            e.preventDefault();
            e.stopPropagation();
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtCustNameSHP" value="foobar" />
<button type="button" onclick="dontDelete = false">enable delete</button>
<button type="button" onclick="dontDelete = true">disable delete</button>
<button type="button" onclick="dontDelete = undefined">Reset (ask on delete)</button>

options:

dontDelete = undefined; user will be presented with a confirmation and choice will be rememberd
dontDelete = false; user will be able to delete.
dontDelete = true; user will NOT be able to delete.

How to prevent keypress event from triggering multiple times — Arpita Dutta, Feb 28 '17 at 04:37
you can add a condition but what's the expected behavior? when do you want it to stop triggering? and when do you want it to trigger again? — Maher Fattouh, Feb 28 '17 at 09:50
ok, added a confirmation message option, let me know it's not what you're looking for — Maher Fattouh, Feb 28 '17 at 10:12

score 5 · Answer 2 · edited Feb 28 '17 at 03:02

First Thing- bind a callback handler to the event keydown, not keyup, because you want to catch the button when its clicked instead of after that. Then use e.which to check which key was pressed. From the jQuery documentation :

To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code.

https://api.jquery.com/keydown/

$("#txtCustNameSHP").keydown( function(e){  
  if( e.which == 8){   
    e.preventDefault();  
    return false;   
  } 
});

score 2 · Answer 3 · answered Feb 27 '17 at 13:06

$('#input').keydown(function(e) {
  if(e.which == 8) {
    var conf = confirm('Do you want to delete the Shipper?')
    if(!conf) e.preventDefault();
    else $(this).val('');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" value="foobar" />

Prevent backspace from deleting in Jquery

3 Answers3

With a Confirmation message: