在文本框中按下退格键时发出警报答案

【问题标题】：Alert when backspace is pressed inside textbox在文本框中按下退格键时发出警报
【发布时间】：2014-01-13 20:04:54
【问题描述】：

我有一个包含三个只读列的网格。每当用户进入那里并尝试通过按退格键进行编辑时，我需要通过发送消息来提醒。我正在使用这个脚本，但它不起作用？谁能纠正我？

  $(document).ready(function () {
      $('#txtCode').bind('keypress', function (e) {
          if (e.which == 8) {
              alert('The column is read-only and is not editable');
          }  
      }         
  });

【问题讨论】：

你错过了) in keypress 只是一个简单的语法错误！
关于代码的用途，为什么只在退格时显示警报？用户可以尝试通过添加新字符进行编辑，或者可以选择现有文本并键入以替换它等。
@nnnnnn：如果可以，我可以使用||后跟脚本中的键码列表？ if (e.which==8 || e.which==46)
是的，你可以，但是列出用户可能按下的所有键是不切实际的。通过不涉及键盘的方法（例如，编辑菜单或拖放）进行的更改又如何呢？你不只是在有问题的元素上有一个readonly 属性吗？
@nnnnnn：老实说，我没有解决方案。有什么办法可以做到吗？

标签： javascript jquery typescript

【解决方案1】：

而不是keypress 尝试使用keyup 或keydown 使用.on() 方法：

$('#txtCode').on('keyup keydown', function (e) {

你也可以像这样绑定多个事件。

$('#txtCode') 的另一件事似乎缺少 });

  $(document).ready(function () {
     $('#txtCode').on('keyup keydown', function (e) {
       if (e.which == 8) {
         alert('The column is read-only and is not editable');
       }  
     }); //<----");" this is the closing you misssed this         
  });

See the fiddle in action

【讨论】：

你引用了头部的jquery库吗？浏览器控制台出现什么错误？如果控制台说jQuery or $ 是未定义的，那么这意味着你必须首先在头部给出jquery 库的引用。
@user3003821 - id 属性应该是唯一的。你有三列和（大概）多行，所以如果所有这些字段都具有相同的id="txtCode" 和$('#txtCode') 可能只会找到第一个 - 尝试将它们更改为class="txtCode" 并使用@987654334 @.
@Jai：我有参考 jquery 库。当我在文本框中按下键时没有任何动作。

【解决方案2】：

您缺少}); 或keypress。谷歌浏览器的按键有问题，你可以试试keydown

$(document).ready(function () {

  $('#txtCode').bind('keydown', function (e) {

  if (e.which == 8) {
  alert('The column is read-only and is not editable');
  }  
  });

  });

要在 Chrome 中使用删除、箭头、退格键，您必须使用 keydown。这些按键上的按键仅适用于 Firefox 和 Opera。

DEMO

【讨论】：

请在左侧检查您引用的 jquery 文件。它在我的机器上工作。是的，它也不是在 chrome 中工作，而是使用 keydown

【解决方案3】：

如果这是您正在测试的所有代码，则说明您没有正确关闭函数，并在我发布的代码中进行了注释。也使用keyup 而不是keypress

$(document).ready(function () {
    $('#txtCode').bind('keyup', function (e) {
        if (e.which == 8) {
            alert('The column is read-only and is not editable');
        }
    }); /*<-- You weren't closing your function properly*/
});

Fiddle

您确实需要添加return false 语句以确保字符不会被删除。我还更进一步，用preventKeyUsage 方法扩展了jQuery。

$(document).ready(function () {
    $.fn.preventKeyUsage = function (key, message) {
        return this.each(function () {
            $(this).on('keydown', function (e) {
                return (e.keyCode === key) ? (function () {
                    alert(message);
                    return false;
                })() : true;
            });
        });
    };

    $('#txtCode').preventKeyUsage(8, 'The column is read-only and is not editable');
});

New Fiddle

【讨论】：

【解决方案4】：

试试这个

$(document).ready(function () {
    $('#txtCode').on('keyup', function (e) {
        if (e.which == 8) {
            alert('The column is read-only and is not editable');
        }
    }); 
});

DEMO（在 Firefox 和 Chrome 上工作）

【讨论】：

@user3003821 在 head 部分添加 jquery 库。看看它的工作原理
@PrasathK - 为什么它不能专门在 Chrome 中工作？它适用于哪些浏览器，为什么？
@nnnnnn 看这里bloggingdeveloper.com/post/…
@Prasath K：我正在检查 IE 8
@user3003821 使用keyup 或keydown 事件而不是keypress

【解决方案5】：

工作代码是：

Java 脚本代码：

$(document).ready(function () {
    $('#txtCode').bind('keypress keydown', function (e) {
        if (e.which == 8) {
            alert('The column is read-only and is not editable');
        }
    });
});

【讨论】：

【解决方案6】：

这是更新的代码

<input type="text" id="txtCode" />

$(document).ready(function () {
    $('#txtCode').bind('keydown', function (e) {
        if (e.which == 8) {
            alert('The column is read-only and is not editable');
            return false;
        }
    });
});

Fiddle Demo

【讨论】：

【解决方案7】：

keypress 事件不会为所有浏览器中的所有键提供键码。最好使用keyup 或keydown 事件，它为所有浏览器中的所有键提供键码

为了了解 keydown 和 keypress 之间的区别，了解“字符”和“键”之间的区别很有用。 “键”是计算机键盘上的物理按钮，而“字符”是通过按下按钮键入的符号。理论上，keydown 和 keyup 事件代表按键被按下或释放，而 keypress 事件代表一个字符被输入。理论的实现在所有浏览器中并不相同。

【讨论】：

【解决方案8】：

$('#textbox').keydown(function(event){
    if(event.keyCode == 8){
        alert("Backspace not allowed..");
        return false;
    }
});

http://jsfiddle.net/xF9jL/1/

【讨论】：

【解决方案9】：

您可以通过不使用接受输入的元素或使用 disabled 属性来解决根本问题：

<textarea name="example" disabled>Some text</textarea>

如果您要回发到服务器，则应假定用户已编辑了该字段，无论您采取什么措施来阻止它。

【讨论】：