防止在Jquery中使用退格键删除内容

Question

防止在Jquery中使用退格键删除内容

3

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

我已经编写了以下代码。虽然它可以正常工作，但它不能防止退格键删除文本。有人能帮帮我吗？

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

- Arpita Dutta

1

听起来...真的很糟糕。你知道这会让人们多么困扰吗，尤其是那些熟练的触摸打字者？ - T.J. Crowder

相反，您可以使用onblur事件来检查值是否被删除，并向用户发出警告。 - Programmer

3个回答

5

第一步是将回调处理程序绑定到事件keydown，而不是keyup，因为您想在按钮被点击时捕获它，而不是之后。然后使用e.which来检查哪个键被按下。根据jQuery文档的说法：

“要确定按下了哪个键，请检查传递给处理程序函数的事件对象。虽然浏览器使用不同的属性来存储此信息，但jQuery规范化了.which属性，因此您可以可靠地使用它来检索键代码。” https://api.jquery.com/keydown/

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

- Hasan Al-Natour

2

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

- Sojtin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Maher Fattouh · Accepted Answer

问题 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; 用户将无法删除。