jquery - 防止Jquery中的退格键删除

Question

我有一个文本框。当用户按下退格按钮时，我想防止退格删除文本并发出特定的警报，例如“您要删除吗”？以及两个按钮。只有当用户确认删除操作时，随后单击退格按钮才会删除文本。

我写了下面的代码。虽然效果很好。但它无法阻止退格键删除文本。谁能帮我解决这个问题吗？

$("#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" />

Answer 1

问题 1:您应该使用 keydown 而不是 keyup，因为删除完成后将触发 keyup

问题 2:您的事件是e，而不是事件

$("#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" />

<小时/>

带有确认消息:

$("#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>

选项:

• dontDelete = undefined; 用户将收到确认并且选择将被记住
• dontDelete = false; 用户将能够删除。
• dontDelete = true; 用户将无法删除。