防止退格删除 Jquery

Question

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

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

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

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

Answer 2

第一件事 - 将回调处理程序绑定到事件 keydown，而不是 keyup，因为你想在按钮被点击时捕获它而不是在那之后。然后使用 e.which 检查按下了哪个键。来自 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;   
  } 
});

Answer 3

问题 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; 用户将收到确认选择 rememberd
dontDelete = false; 用户将能够删除。
dontDelete = true; 用户无法删除。

防止退格删除 Jquery

Prevent backspace from deleting in Jquery

jquery

keypress

keycode

backspace

带有确认消息：