防止退格键在 Jquery 中删除答案

【问题标题】：Prevent backspace from deleting in Jquery防止退格键在 Jquery 中删除
【发布时间】：2017-02-27 13:01:27
【问题描述】：

我有一个文本框。当用户按下退格按钮时，我想防止退格删除文本并给出特定的警报，例如“要删除”？连同两个按钮。只有当用户确认删除操作后，后续点击退格键才会删除文本。

我写了下面的代码。虽然它工作正常。但它无法阻止退格键删除文本。谁能帮我解决这个问题？

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

【问题讨论】：

听起来……真的很糟糕。你知道这会让人们绊倒吗，尤其是打字员？
相反，您可以使用 onblur 事件来检查该值是否被删除并提醒用户是否相同。

标签： jquery keypress keycode backspace

【解决方案1】：

问题1：你应该使用keydown而不是keyup，因为keyup会在删除完成后触发

问题 2：您的活动是 e 而不是 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" />

带有确认消息：

$("#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; 用户将不能够删除。

【讨论】：

如何防止按键事件多次触发
您可以添加一个条件，但预期的行为是什么？您希望它何时停止触发？你希望它什么时候再次触发？
好的，添加了确认消息选项，让我知道这不是您要查找的内容
谢谢。它起作用了..这就是我想要的

【解决方案2】：

First Thing - 将回调处理程序绑定到事件 keydown，而不是 keyup，因为您希望在按钮被点击时而不是之后捕获按钮。然后使用e.which 检查按下了哪个键。来自the jQuery documentation：

要确定按下了哪个键，请检查事件对象传递给处理函数。虽然浏览器使用不同属性来存储这些信息，jQuery 规范化 .which 属性，以便您可以可靠地使用它来检索密钥代码。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：