Deaktivieren Sie das Einfügen von Text in das HTML-Formular

Question 1

Gibt es eine Möglichkeit, JavaScript zu verwenden, um die Möglichkeit zum Einfügen von Text in ein Textfeld in einem HTML-Formular zu deaktivieren?

ZB habe ich ein einfaches Registrierungsformular, bei dem der Benutzer seine E-Mail-Adresse zweimal eingeben muss. Der zweite E-Mail-Eintrag soll sicherstellen, dass der erste E-Mail-Eintrag keine Tippfehler enthält. Wenn der Benutzer jedoch seine E-Mail kopiert/einfügt, verfehlt dies den Zweck, und ich habe erlebt, dass Benutzer Probleme haben, weil sie die falsche E-Mail eingegeben und kopiert/eingefügt haben.

Vielleicht war meine Frage nicht klar, aber ich versuche nicht, Leute daran zu hindern, Text in ihrem Browser zu kopieren (oder durch Ziehen auszuwählen). Ich will sie nur davon abhalten einfügen Eingabe in ein Textfeld, um Benutzerfehler zu minimieren.

Vielleicht können Sie, anstatt diesen “Hack” zu verwenden, eine andere Lösung für das Kernproblem vorschlagen, das ich hier zu lösen versuche? Ich habe weniger als ein halbes Dutzend Benutzertests durchgeführt und dies ist bereits zweimal passiert. Mein Publikum verfügt nicht über ein hohes Maß an Computerkenntnissen.

Question 2

Tu es nicht. Leg dich nicht mit dem Browser des Benutzers an. Durch Kopieren + Einfügen in ein E-Mail-Bestätigungsfeld übernimmt der Benutzer die Verantwortung für das, was er eingibt. Wenn sie dumm genug sind, eine fehlerhafte Adresse zu kopieren und einzufügen (das ist mir passiert), dann ist es ihre eigene verdammte Schuld.

Wenn Sie sicherstellen möchten, dass die E-Mail-Bestätigung funktioniert, lassen Sie den Benutzer seine E-Mail überprüfen, während Ihre Website wartet (“Bitte öffnen Sie Ihr Webmail-Programm in einem neuen Fenster”). Zeigen Sie die E-Mail-Adresse in großen, fetten Buchstaben an (“Die Bestätigungs-E-Mail wurde gesendet an …. hat einen Fehler gemacht? Klicken Sie hier, um zu ändern).

Noch besser, wenn Sie können, lassen Sie dem Benutzer eine Art eingeschränkten Zugriff ohne Bestätigung. So kann er sich sofort einloggen und Sie verbessern Ihre Chancen, mit dem Besucher in Kontakt zu bleiben, auch wenn die Bestätigungsmail aus anderen Gründen (zB Spamfilter) blockiert wird.

Question 3

Fügen Sie den Eingaben, für die Sie die Funktion zum Kopieren und Einfügen deaktivieren möchten, eine Klasse von „disablecopypaste“ hinzu, und fügen Sie dieses jQuery-Skript hinzu

  $(document).ready(function () {
    $('input.disablecopypaste').bind('copy paste', function (e) {
       e.preventDefault();
    });
  });

Question 4

Ich musste kürzlich widerwillig das Einfügen in ein Formularelement deaktivieren. Dazu habe ich eine Cross-Browser*-Implementierung des onpaste-Event-Handlers von Internet Explorer (und anderen) geschrieben. Meine Lösung musste unabhängig von JavaScript-Bibliotheken von Drittanbietern sein.

Hier ist, was ich mir ausgedacht habe. Es deaktiviert das Einfügen nicht vollständig (der Benutzer kann beispielsweise jeweils ein einzelnes Zeichen einfügen), aber es erfüllt meine Anforderungen und vermeidet den Umgang mit keyCodes usw.

// 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);
                }
            }
        }
    }
})();

Um davon Gebrauch zu machen, um das Einfügen zu deaktivieren:

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

* Ich weiß, dass oninput nicht Teil der W3C-DOM-Spezifikation ist, aber alle Browser, mit denen ich diesen Code getestet habe – Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 – unterstützen entweder oninput oder onpaste. Von all diesen Browsern unterstützt nur Opera nicht onpaste, aber es unterstützt oninput.

Hinweis: Dies funktioniert nicht auf einer Konsole oder einem anderen System, das eine Bildschirmtastatur verwendet (vorausgesetzt, die Bildschirmtastatur sendet keine Tasten an den Browser, wenn jede Taste ausgewählt wird). Wenn es möglich ist, dass Ihre Seite/App von jemandem mit einer Bildschirmtastatur und Opera (z. B.: Nintendo Wii, einige Mobiltelefone) verwendet werden könnte, verwenden Sie dieses Skript nicht, es sei denn, Sie haben die Bildschirmtastatur getestet sendet nach jeder Tastenauswahl Schlüssel an den Browser.

Question 5

Ich habe das gerade bekommen, wir können es erreichen, indem wir es verwenden onpaste:"return false"Dank an: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Wir haben verschiedene andere Optionen, die unten aufgeführt sind.

<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/><br>

Question 6

Sie können … aber nicht.

Sie sollten das Standardverhalten eines Benutzerbrowsers nicht ändern. Es ist wirklich eine schlechte Benutzerfreundlichkeit für Ihre Webanwendung. Auch wenn ein Benutzer diesen Hack deaktivieren möchte, kann er einfach Javascript in seinem Browser deaktivieren.

Fügen Sie diese Attribute einfach dem Textfeld hinzu

ondragstart=”return false” onselectstart=”return false”

Question 7

Verrückte Idee: Fordern Sie den Benutzer auf, Ihnen im Rahmen des Anmeldevorgangs eine E-Mail zu senden. Dies wäre natürlich unpraktisch, wenn das Klicken auf einen Mailto-Link nicht funktioniert (wenn sie beispielsweise Webmail verwenden), aber ich sehe es als eine Möglichkeit, gleichzeitig Tippfehler zu vermeiden und die E-Mail-Adresse zu bestätigen.

Es würde so gehen: Sie füllen den größten Teil des Formulars aus, geben ihren Namen, ihr Passwort und so weiter ein. Wenn sie auf Senden drücken, klicken sie tatsächlich auf einen Link, um E-Mails an Ihren Server zu senden. Sie haben ihre anderen Informationen bereits gespeichert, daher enthält die Nachricht nur ein Token, das besagt, für welches Konto dies gilt.

Question 8

Wie wäre es, wenn Sie eine Bestätigungs-E-Mail an die E-Mail-Adresse senden, die der Benutzer gerade zweimal eingegeben hat, in der sich ein Link zu einer Bestätigungs-URL auf Ihrer Website befindet, dann wissen Sie, dass er die Nachricht erhalten hat?

Wer den Empfang der E-Mail nicht mit einem Klick bestätigt, hat möglicherweise seine E-Mail-Adresse falsch eingegeben.

Keine perfekte Lösung, aber nur einige Ideen.