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

Gibt es eine Möglichkeit, mithilfe von JavaScript die Möglichkeit zu deaktivieren, Text in ein Textfeld in einem HTML-Formular einzufügen?

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

Vielleicht war mir meine Frage nicht klar, aber ich versuche nicht zu verhindern, dass Leute Text in ihren Browser kopieren (oder per Drag & Drop auswählen). Ich will nur , um sie von stoppen Einfügen Eingabe in ein Textfeld Anwenderfehler zu minimieren.

Vielleicht können Sie anstelle dieses "Hacks" 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 hohe Computerkenntnisse.

Ich musste kürzlich das Einfügen in ein Formularelement widerwillig deaktivieren. Zu diesem Zweck habe ich eine browserübergreifende * Implementierung des Onpaste-Ereignishandlers von Internet Explorer (und anderen) geschrieben. Meine Lösung musste unabhängig von JavaScript-Bibliotheken von Drittanbietern sein.

Folgendes habe ich mir ausgedacht. Das Einfügen wird nicht vollständig deaktiviert (der Benutzer kann beispielsweise jeweils ein einzelnes Zeichen einfügen), aber es erfüllt meine Anforderungen und vermeidet, dass Sie sich mit keyCodes usw. befassen müssen.

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

So nutzen Sie dies, 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 Onpaste nicht, aber Oninput.

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

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 die Eingabe. Wenn sie dumm genug sind, eine fehlerhafte Adresse zu kopieren und einzufügen (mir ist es 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-Mails ü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 an ... hat einen Fehler gemacht? Klicken Sie hier, um sie zu ändern).

Noch besser, wenn Sie können, lassen Sie den Benutzer einen eingeschränkten Zugriff haben, ohne dies zu bestätigen. Auf diese Weise können sie sich sofort anmelden und Sie verbessern Ihre Chancen, mit dem Besucher in Kontakt zu bleiben, auch wenn die Bestätigungsmail aus anderen Gründen (z. B. Spamfiltern) blockiert ist.

Fügen Sie den Eingaben, für die Sie die Kopier- und Einfügefunktion 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();
    });
  });

Gerade erst haben wir es erreicht onpaste:"return false", dank: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Wir haben verschiedene andere Optionen zur Verfügung, wie unten aufgeführt.

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

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”

Verrückte Idee: Der Benutzer muss Ihnen im Rahmen des Anmeldevorgangs eine E-Mail 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 gegen Tippfehler zu garantieren und die E-Mail-Adresse zu bestätigen.

Es würde so aussehen: Sie füllen den größten Teil des Formulars aus und geben ihren Namen, ihr Passwort und so weiter ein. Wenn sie auf "Senden" klicken, 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 angibt, für welches Konto dies gilt.

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

Jeder, der nicht klickt, um den Empfang der E-Mail zu bestätigen, hat möglicherweise seine E-Mail-Adresse falsch eingegeben.

Keine perfekte Lösung, sondern nur einige Ideen.

Sie können jquery verwenden

HTML-Datei

<input id="email" name="email">

JQuery-Code

$('#email').bind('copy paste', function (e) {
        e.preventDefault();
    });

Wenn Sie die @ boycs- Antwort erweitern, würde ich empfehlen, auch "on" zu verwenden.

$('body').on('copy paste', 'input', function (e) { e.preventDefault(); });

Wenn Sie 2 E-Mail-Felder verwenden müssen und Bedenken haben, dass der Benutzer dieselbe falsch eingegebene E-Mail von Feld 1 in Feld 2 falsch einfügt, würde ich sagen, dass eine Warnung (oder etwas subtileres) angezeigt wird, wenn der Benutzer etwas in das zweite E-Mail-Feld einfügt

document.querySelector('input.email-confirm').onpaste = function(e) {
    alert('Are you sure the email you\'ve entered is correct?');
}

Auf diese Weise deaktivieren Sie das Einfügen nicht. Sie erinnern sie lediglich freundlich daran, zu überprüfen, was sie vermutlich in das erste Feld eingegeben und dann in das zweite Feld eingefügt haben.

Möglicherweise ist jedoch nur ein einziges E-Mail-Feld mit aktivierter automatischer Vervollständigung erforderlich. Möglicherweise haben sie ihre E-Mail-Adresse irgendwann auf einer anderen Website korrekt ausgefüllt, und der Browser schlägt vor, das Feld mit dieser E-Mail-Adresse auszufüllen

<input type="email" name="email" required autocomplete="email">

Sie können dem Eingabefeld einen "Keydown" -Listener hinzufügen, um festzustellen, ob die Tasten Strg + V gedrückt werden, und in diesem Fall das Ereignis stoppen oder den Wert des Eingabefelds auf '' setzen.

Das würde jedoch nicht mit Rechtsklick und Einfügen oder Einfügen aus dem Menü Bearbeiten des Browsers umgehen. Möglicherweise müssen Sie dem Keydown-Listener einen Zähler für die "letzte Länge" hinzufügen und in einem Intervall die aktuelle Länge des Felds überprüfen, um festzustellen, ob sie seit dem letzten Tastendruck zunimmt.

Beides wird jedoch nicht empfohlen. Formularfelder mit deaktiviertem Einfügen sind äußerst frustrierend. Ich kann meine E-Mail beim ersten Mal korrekt eingeben, daher behalte ich mir das Recht vor, sie in das zweite Feld einzufügen.

Fügen Sie Ihrem Registrierungsprozess einen zweiten Schritt hinzu. Erste Seite wie gewohnt, aber beim Neuladen eine zweite Seite anzeigen und die E-Mail erneut fragen. Wenn es so wichtig ist, kann der Benutzer damit umgehen.

von

Einige schlagen möglicherweise vor, Javascript zu verwenden, um die Aktionen der Benutzer zu erfassen, z. B. das Klicken mit der rechten Maustaste oder die Tastenkombinationen Strg + C / Strg + V und das anschließende Stoppen des Vorgangs. Dies ist jedoch offensichtlich nicht die beste oder einfachste Lösung. Die Lösung ist zusammen mit einigen Ereigniserfassungen mit Javascript in die Eigenschaften des Eingabefelds selbst integriert.

Um die automatische Vervollständigung des Browsers zu deaktivieren, fügen Sie einfach das Attribut zum Eingabefeld hinzu. Es sollte ungefähr so ​​aussehen:

<input type="text" autocomplete="off">

Wenn Sie das Kopieren und Einfügen für dieses Feld verweigern möchten, fügen Sie einfach das Javascript-Ereignis hinzu, mit dem Aufrufe oncopy, onpaste und oncut erfasst werden, und lassen Sie sie wie folgt falsch zurückgeben:

<input type="text" oncopy="return false;" onpaste="return false;" oncut="return false;">

Der nächste Schritt ist die Verwendung von onselectstart, um die Inhaltsauswahl des Eingabefelds für den Benutzer zu verweigern. Seien Sie jedoch gewarnt: Dies funktioniert nur für Internet Explorer. Der Rest der oben genannten Funktionen funktioniert hervorragend in allen gängigen Browsern: Internet Explorer, Mozilla Firefox, Apple Safari (zumindest unter Windows) und Google Chrome.

Überprüfen Sie die Gültigkeit des MX-Datensatzes des Hosts der angegebenen E-Mail. Dies kann Fehler rechts vom @ -Zeichen beseitigen.

Sie können dies mit einem AJAX-Aufruf vor dem Senden und / oder auf der Serverseite nach dem Senden des Formulars tun.

Mit jquery können Sie das Kopieren, Einfügen und Ausschneiden vermeiden

$('.textboxClass').on('copy paste cut', function(e) {
    e.preventDefault();
});

Ich benutze diese Vanilla JS-Lösung:

const element = document.getElementById('textfield')
element.addEventListener('paste', e =>  e.preventDefault())

Mit Jquery können Sie dies mit einer einfachen Codeline tun.

HTML:

<input id="email" name="email">

Code:

$(email).on('paste', false);

JSfiddle: https://jsfiddle.net/ZjR9P/2/

Was ist mit CSS auf UIWebView? etwas wie

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }
-->
</style>

Sie können auch Details zum Blockieren und Einfügen von Blöcken mithilfe von CSS lesen. http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Einfache Lösung: Kehren Sie einfach den Registrierungsprozess um: Anstatt eine Bestätigung am Ende des Registrierungsprozesses zu verlangen, fordern Sie eine Bestätigung am Anfang an! Das heißt, der Registrierungsprozess begann mit einem einfachen Formular, in dem Sie nach der E-Mail-Adresse und nichts anderem gefragt wurden. Nach dem Absenden wird eine E-Mail mit einem Link zu einer Bestätigungsseite gesendet, die für die versendete E-Mail-Adresse eindeutig ist. Der Benutzer wechselt zu dieser Seite, und der Rest der Informationen für die Registrierung (Benutzername, vollständiger Name usw.) wird angefordert.

Dies ist einfach, da die Website vor der Bestätigung nicht einmal etwas speichern muss. Die E-Mail-Adresse kann mit einem Schlüssel verschlüsselt und als Teil der Adresse der Bestätigungsseite angehängt werden.

Ich habe etwas Ähnliches für http://bookmarkchamp.com gemacht - dort wollte ich erkennen, wann ein Benutzer etwas in ein HTML-Feld kopiert hat. Die Implementierung, die ich mir ausgedacht habe, bestand darin, das Feld ständig zu überprüfen, um festzustellen, ob zu irgendeinem Zeitpunkt plötzlich eine ganze Menge Text darin war.

Mit anderen Worten: Wenn vor einer Millisekunde noch kein Text vorhanden war und jetzt mehr als 5 Zeichen vorhanden sind, hat der Benutzer wahrscheinlich etwas in das Feld eingefügt.

Wenn Sie möchten, dass dies in Bookmarkchamp funktioniert (Sie müssen registriert sein), fügen Sie eine URL in das URL-Feld ein (oder ziehen Sie eine URL per Drag & Drop hinein).

Ich würde das Problem der Bestätigung einer E-Mail-Adresse folgendermaßen lösen:

1. Bevor Sie den Hauptprozess durchlaufen - beispielsweise die Registrierung des Benutzers -, bitten Sie ihn zunächst, seine E-Mail-Adresse einzugeben.
2. Generieren Sie einen eindeutigen Code und senden Sie ihn an diese E-Mail-Adresse.
3. Wenn der Benutzer die richtige E-Mail-Adresse eingegeben hat, erhält er den Code.
4. Der Benutzer muss diesen Code zusammen mit seiner E-Mail-Adresse und den anderen erforderlichen Informationen eingeben, damit er die Registrierung abschließen kann. - Bitte beachten Sie, dass wenn sie diesmal eine falsche E-Mail-Adresse (oder einen falschen Code) eingeben, die nicht mit dem Code übereinstimmt, die Registrierung nicht durchgeführt wird und der Benutzer sofort informiert wird.
5. Wenn die E-Mail-Adresse, der Code und andere Registrierungsinformationen korrekt eingegeben wurden, ist die Registrierung abgeschlossen und der Benutzer kann das System sofort verwenden. - Sie müssen nicht auf eine andere E-Mail-Adresse antworten, um deren Konto zu aktivieren

Zur besseren Sicherheit sollte der Code eine begrenzte Lebensdauer haben und nur einmal im Registrierungsprozess zugelassen werden. Um böswillige Roboteranwendungen zu verhindern, ist es außerdem besser, den ersten Schritt mit Captcha oder einem ähnlichen Mechanismus zu begleiten.

Sie können die Option zum Kopieren und Einfügen von jQuery über das folgende Skript deaktivieren. jQuery ("input"). attr ("onpaste", "return false;");

von durch Verwendung des folgenden Attributs oppaste in den Eingabefeldern.

onpaste = "return false;"

Hope below code will work :

<!--Disable Copy And Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>