javascript - JQuery onpaste 事件限制用户粘贴像 | 这样的字符, ./

Question

我想确保用户不能粘贴带有 (. | ") 的字符串，我该如何防止它？我正在研究键盘键，它在用户键入时起作用。但我如何防止粘贴？

这是 jsfiddle Testing here

这是我的java脚本

$("[name='search']").on({
keydown: function(e) {
    if (e.which === 32 || e.which === 220) {
        e.preventDefault();
        var v = this.value,
            s = this.selectionStart;
        this.value = v.substr(0, s) + '' + v.substr(s, v.length);
    }
     if (e.which === 55) {
        e.preventDefault();
        var v = this.value,
            s = this.selectionStart;
        this.value = v.substr(0, s) + '7' + v.substr(s, v.length);
    }
},


// Here is the paste function but i no sure how to write it

paste: function(e) {
    var s = this;
    setTimeout(function() {
        // here i no sure how to do it
    });
   }
});

Answer 1

强制性说明:您似乎正在尝试进行一些客户端验证。在我回答之前，我要指出客户端验证不是很可靠——尤其是当涉及到安全时——因为任何了解 js 控制台的人都可以击败它。见问题why is client-side validation not enough?更多。如果您想防止输入不正确的字符，则必须在服务器端进行。

话虽如此，在客户端进行检查很方便，可以节省用户一些时间。最可靠的方法是使用 test()和一个简单的 regular expression .然后，您可以使用该 test 和 if 条件来使用 replace() 去除有问题的值.

加上你原来的代码，看起来有点像这样:

function check(e){
    var expression = new RegExp(/[\.\|]/, "g");
    if (expression.test(e.target.value)){
        e.target.value = e.target.value.replace(expression, "")
    }
}

您可以从 $("[name='search']").on({ 部分的适当位置调用该函数。另请注意，您的表达式可以是任何正则表达式，允许您检查任何字符或组合字符。Regex is power .

您可以将第 2-5 行放入粘贴时调用的函数中，但在 Safari 和 Chrome 中对其进行测试后，您最好的选择可能是调用 check()在粘贴或模糊事件之后执行上述功能。这是因为粘贴到输入中并不总是会触发更改事件。 .on() 的 jQuery 文档中有一些详细信息，尽管反复试验也很棒。

将所有这些放在一起，我得到了以下内容:

function check(e){
    var expression = new RegExp(/[\.\|]/, "g");
    if (expression.test(e.target.value)){
        e.target.value = e.target.value.replace(expression, "")
    }
}

$("[name='search']").on({
    keydown: function(e) {...},
    paste: function(e){
        check(e)
    },
    blur: function(e){
        check(e)
    }
});

希望这对您有所帮助!

---

改进提示:我个人会在这方面多做一些工作，使代码更可靠、更具表现力，稍微清理一下，并可能重新考虑我的总体方法。仅供初学者使用:

1. 考虑抛出错误并从输入框中删除所有内容，而不是仅仅删除违规字符“.|” — 在不警告用户的情况下更改用户的输入通常是一个糟糕的举动。通常最好只删除所有内容。

2. 删除阻止输入某些字符的部分。再说一次:了解 JS 控制台的人可以很快解决这个问题，而您只是通过检查每个按键来增加开销。这不是主要问题，但可以改进。

3. 使用 switch case 语句将所有检查逻辑放在一个地方，并针对所有适当的事件运行它。您必须喜欢上 jQuery 事件监听器，这可能不值得，但如果我正在编写这段代码，我会调查一下。