禁用将文本粘贴到HTML表单中 [英] Disable pasting text into HTML form

问题描述

有没有使用JavaScript的方法来禁止将文本粘贴到HTML表单上的文本字段？

Is there a way using JavaScript to disable the ability to paste text into a text field on an HTML form?

例如，
我有一个简单的注册表单，用户需要输入两次邮件。第二封电子邮件条目用于验证第一封电子邮件条目中是否有拼写错误。然而，如果用户复制/粘贴他们的电子邮件，那么就会失去目的，而且我遇到了用户遇到的问题，因为他们输入了错误的电子邮件并复制/粘贴了它。

E.g. I have a simple registration form where the user is required to input their email twice. The second email entry is to verify there are no typos in the first email entry. However if the user copy/pastes their email then that defeats the purpose and I've been experiencing users having problems because they've input the wrong email and copy/pasted it.

也许我对我的问题并不清楚，但我并没有试图阻止人们在他们的浏览器上复制（或拖动选择）文本。我只是想阻止他们从粘贴输入到文本字段中，以最大限度地减少用户错误。

Maybe I wasn't clear on my question but I am not trying to prevent people from copying (or drag selecting) text on their browser. I just want to stop them from pasting input into a text field to minimize user error.

也许不使用这种黑客建议另一个解决方案来解决我在这里要解决的核心问题？我已经完成了不到六次的用户测试，这已经发生了两次。我的受众没有很高的计算机熟练度。

Perhaps instead of using this "hack" you can suggest another solution to the core problem of what I'm trying to solve here? I've done less than half a dozen user tests and this has already happened twice. My audience does not have a high level of computer proficiency.

推荐答案

我最近不得不谨慎地禁用粘贴表单元素。为此，我编写了Internet浏览器（和其他人）的浏览器*实现onpaste事件处理程序。我的解决方案必须独立于任何第三方JavaScript库。

I recently had to begrudgingly disable pasting in a form element. To do so, I wrote a cross-browser* implementation of Internet Explorer's (and others') onpaste event handler. My solution had to be independent of any third-party JavaScript libraries.

以下是我想到的。它并不完全禁用粘贴（例如，用户可以一次粘贴一个字符），但它符合我的需求，避免了必须处理keyCodes等。

Here's what I came up with. It doesn't completely disable pasting (the user can paste a single character at a time, for example), but it meets my needs and avoids having to deal with keyCodes, etc.

// Register onpaste on inputs and textareas in browsers that don't
// natively support it.
(function () {
    var onload = window.onload;

    window.onload = function () {
        if (typeof onload == "function") {
            onload.apply(this, arguments);
        }

        var fields = [];
        var inputs = document.getElementsByTagName("input");
        var textareas = document.getElementsByTagName("textarea");

        for (var i = 0; i < inputs.length; i++) {
            fields.push(inputs[i]);
        }

        for (var i = 0; i < textareas.length; i++) {
            fields.push(textareas[i]);
        }

        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];

            if (typeof field.onpaste != "function" && !!field.getAttribute("onpaste")) {
                field.onpaste = eval("(function () { " + field.getAttribute("onpaste") + " })");
            }

            if (typeof field.onpaste == "function") {
                var oninput = field.oninput;

                field.oninput = function () {
                    if (typeof oninput == "function") {
                        oninput.apply(this, arguments);
                    }

                    if (typeof this.previousValue == "undefined") {
                        this.previousValue = this.value;
                    }

                    var pasted = (Math.abs(this.previousValue.length - this.value.length) > 1 && this.value != "");

                    if (pasted && !this.onpaste.apply(this, arguments)) {
                        this.value = this.previousValue;
                    }

                    this.previousValue = this.value;
                };

                if (field.addEventListener) {
                    field.addEventListener("input", field.oninput, false);
                } else if (field.attachEvent) {
                    field.attachEvent("oninput", field.oninput);
                }
            }
        }
    }
})();

使用这个命令禁用粘贴：

To make use of this in order to disable pasting:

<input type="text" onpaste="return false;" />

---

*我知道oninput不是W3C DOM规范，但是我已经使用&2; Chrome 2，Safari 4，Firefox 3，Opera 10，IE6，IE7测试了这些代码的所有浏览器都支持onInput或onpaste。在所有这些浏览器中，只有Opera不支持onpaste，但支持oninput。

---

* I know oninput isn't part of the W3C DOM spec, but all of the browsers I've tested this code with—Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7—support either oninput or onpaste. Out of all these browsers, only Opera doesn't support onpaste, but it does support oninput.

注意：这不适用于控制台或其他使用一个屏幕上的键盘（假设当每个键被选中时，屏幕键盘不会将键发送到浏览器）。如果有可能您的页面/应用程序可能被具有屏幕键盘和Opera的人使用（例如：任天堂Wii，某些手机），请不要使用此脚本，除非您已经测试确保屏幕键盘在每次按键选择后将密钥发送到浏览器。

Note: This won't work on a console or other system that uses an on-screen keyboard (assuming the on-screen keyboard doesn't send keys to the browser when each key is selected). If it's possible your page/app could be used by someone with an on-screen keyboard and Opera (e.g.: Nintendo Wii, some mobile phones), don't use this script unless you've tested to make sure the on-screen keyboard sends keys to the browser after each key selection.

这篇关于禁用将文本粘贴到HTML表单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！