Disabilita l'incolla del testo nel modulo HTML

Esiste un modo utilizzando JavaScript per disabilitare la possibilità di incollare il testo in un campo di testo su un modulo HTML?

Ad esempio, ho un semplice modulo di registrazione in cui l'utente è tenuto a inserire la propria email due volte. La seconda voce di posta elettronica serve per verificare che non siano presenti errori di battitura nella prima voce di posta elettronica. Tuttavia, se l'utente copia / incolla la propria email, ciò vanifica lo scopo e ho riscontrato problemi con gli utenti perché hanno inserito l'email sbagliata e l'hanno copiata / incollata.

Forse non ero chiaro sulla mia domanda, ma non sto cercando di impedire alle persone di copiare (o trascinare la selezione) del testo sul proprio browser. Voglio solo impedire loro di incollare l' input in un campo di testo per ridurre al minimo l'errore dell'utente.

Forse invece di usare questo "hack" puoi suggerire un'altra soluzione al problema centrale di quello che sto cercando di risolvere qui? Ho eseguito meno di una mezza dozzina di test utente e questo è già successo due volte. Il mio pubblico non ha un alto livello di competenza informatica.

Recentemente ho dovuto disabilitare a malincuore l'incollaggio in un elemento del modulo. Per farlo, ho scritto un'implementazione cross-browser * del gestore di eventi onpaste di Internet Explorer (e di altri). La mia soluzione doveva essere indipendente da qualsiasi libreria JavaScript di terze parti.

Ecco cosa mi è venuto in mente. Non disabilita completamente l'incollaggio (l'utente può incollare un singolo carattere alla volta, ad esempio), ma soddisfa le mie esigenze ed evita di avere a che fare con i keyCodes, ecc.

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

Per utilizzarlo per disabilitare l'incollaggio:

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

* So che oninput non fa parte delle specifiche DOM W3C, ma tutti i browser con cui ho testato questo codice — Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 — supportano oninput o onpaste. Di tutti questi browser, solo Opera non supporta onpaste, ma supporta oninput.

Nota: non funzionerà su una console o un altro sistema che utilizza una tastiera su schermo (supponendo che la tastiera su schermo non invii i tasti al browser quando ogni tasto è selezionato). Se è possibile che la tua pagina / app possa essere utilizzata da qualcuno con una tastiera su schermo e Opera (ad esempio: Nintendo Wii, alcuni telefoni cellulari), non utilizzare questo script a meno che tu non abbia testato per assicurarti che la tastiera su schermo invia le chiavi al browser dopo ogni selezione di chiave.

Non farlo. Non scherzare con il browser dell'utente. Copiando e incollando in un campo di conferma di posta elettronica, l'utente si assume la responsabilità di ciò che digita. Se sono così stupidi da copiare e incollare un indirizzo difettoso (è successo a me), allora è colpa loro.

Se vuoi assicurarti che la conferma dell'e-mail funzioni, chiedi all'utente di controllare la propria posta mentre il tuo sito attende ("Per favore apri il tuo programma di webmail in una nuova finestra"). Mostra l'indirizzo e-mail in grandi lettere grosse ("L'e-mail di conferma è stata inviata a .... ha fatto un errore? Fare clic qui per modificare).

Ancora meglio, se puoi, lascia che l'utente abbia un accesso limitato senza confermare. In questo modo potranno accedere immediatamente e tu aumenterai le tue possibilità di restare in contatto con il visitatore anche se la mail di conferma è bloccata per altri motivi (es. Filtri antispam).

Aggiungi una classe di 'disablecopypaste' agli input su cui desideri disabilitare la funzionalità di copia incolla e aggiungi questo script jQuery

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

Appena ottenuto, possiamo realizzarlo usando onpaste:"return false", grazie a: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Abbiamo varie altre opzioni disponibili come elencato di seguito.

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

Puoi ..... ma non farlo.

Non dovresti alterare il comportamento predefinito del browser di un utente. È davvero una cattiva usabilità per la tua applicazione web. Inoltre, se un utente desidera disabilitare questo hack, può semplicemente disabilitare javascript sul proprio browser.

Basta aggiungere questi attributi alla casella di testo

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

Idea folle: richiedi all'utente di inviarti un'e-mail come parte del processo di registrazione. Questo sarebbe ovviamente scomodo quando fare clic su un collegamento mailto non funziona (se usano la webmail, ad esempio), ma lo vedo come un modo per garantire contemporaneamente contro gli errori di battitura e confermare l'indirizzo email.

Andrebbe così: compilano la maggior parte del modulo, inserendo il loro nome, password e quant'altro. Quando inviano push, in realtà fanno clic su un collegamento per inviare posta al tuo server. Hai già salvato le loro altre informazioni, quindi il messaggio include solo un token che dice a quale account è destinato.

Che ne dici di inviare un'e-mail di conferma all'indirizzo e-mail che l'utente ha appena inserito due volte in cui è presente un collegamento a un URL di conferma sul tuo sito, quindi sai che hanno ricevuto il messaggio?

Chiunque non faccia clic per confermare la ricezione dell'e-mail potrebbe aver inserito il proprio indirizzo e-mail in modo errato.

Non una soluzione perfetta, ma solo alcune idee.

Puoi usare jquery

File HTML

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

codice jquery

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

Estendendo la risposta di @boycs , consiglierei di usare anche "on".

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

se devi utilizzare 2 campi e-mail e sei preoccupato che l'utente incolli in modo errato la stessa e-mail errata dal campo 1 al campo 2, direi che mostra un avviso (o qualcosa di più sottile) se l'utente incolla qualcosa nel secondo campo e-mail

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

in questo modo non disabiliti l'incolla, dai loro un semplice promemoria per controllare che ciò che hanno presumibilmente digitato nel primo campo e poi incollato nel secondo campo sia corretto.

tuttavia, forse è sufficiente un singolo campo di posta elettronica con il completamento automatico attivato. è probabile che prima o poi abbiano compilato correttamente la loro email su un altro sito e il browser suggerirà di riempire il campo con quell'email

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

È possibile allegare un listener "keydown" alla casella di input per rilevare se vengono premuti o meno i tasti Ctrl + V e, in tal caso, interrompere l'evento o impostare il valore della casella di input su "".

Tuttavia, ciò non gestirà il clic con il pulsante destro del mouse e incollare o incollare dal menu Modifica del browser. Potrebbe essere necessario aggiungere un contatore "ultima lunghezza" al listener keydown e utilizzare un intervallo per controllare la lunghezza corrente del campo per vedere se aumenta dall'ultima pressione di un tasto.

Nessuno dei due è consigliato, però. I campi modulo con incolla disabilitata sono estremamente frustranti. Sono in grado di digitare correttamente la mia email la prima volta, quindi mi riservo il diritto di incollarla nella seconda casella.

Aggiungi un secondo passaggio al processo di registrazione. Prima pagina come al solito, ma al ricaricamento, visualizza una seconda pagina e chiedi di nuovo l'email. Se è così importante, l'utente può gestirlo.

a partire dal

Alcuni potrebbero suggerire di utilizzare Javascript per acquisire le azioni degli utenti, come fare clic con il pulsante destro del mouse o le combinazioni di tasti Ctrl + C / Ctrl + V e quindi interrompere l'operazione. Ma questa ovviamente non è la soluzione migliore o più semplice. La soluzione è integrata nelle proprietà del campo di input stesso insieme ad alcuni eventi che catturano utilizzando Javascript.

Per disabilitare il completamento automatico dei browser, è sufficiente aggiungere l'attributo al campo di input. Dovrebbe assomigliare a qualcosa di simile a questo:

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

E se vuoi negare Copia e Incolla per quel campo, aggiungi semplicemente l'evento Javascript che cattura le chiamate oncopy, onpaste e oncut e rendile false, in questo modo:

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

Il passaggio successivo consiste nell'usare onselectstart per negare all'utente la selezione del contenuto del campo di input, ma attenzione: funziona solo per Internet Explorer. Il resto di quanto sopra funziona alla grande su tutti i principali browser: Internet Explorer, Mozilla Firefox, Apple Safari (su Windows OS, almeno) e Google Chrome.

Verifica la validità del record MX dell'host dell'email fornita. Questo può eliminare gli errori a destra del segno @.

È possibile farlo con una chiamata AJAX prima dell'invio e / o lato server dopo l'invio del modulo.

Usando jquery, puoi evitare di copiare, incollare e tagliare usando questo

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

Uso questa soluzione JS vanigliata:

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

Con Jquery puoi farlo con una semplice codeline.

HTML:

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

Codice:

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

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

che dire dell'utilizzo dei CSS su UIWebView? qualcosa di simile a

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

puoi anche leggere i dettagli sul blocco copia-incolla usando CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Soluzione semplice: basta invertire il processo di registrazione: invece di richiedere la conferma alla fine del processo di registrazione, richiedere la conferma all'inizio di esso! Cioè il processo di registrazione è iniziato con un semplice modulo che richiedeva l'indirizzo e-mail e nient'altro. Al momento dell'invio, un'e-mail con collegamento a una pagina di conferma univoca all'indirizzo e-mail inviato. L'utente va su quella pagina, quindi verranno richieste le altre informazioni per la registrazione (nome utente, nome completo, ecc.).

Questo è semplice poiché il sito Web non ha nemmeno bisogno di memorizzare nulla prima della conferma, l'indirizzo e-mail può essere crittografato con una chiave e allegato come parte dell'indirizzo della pagina di conferma.

Ho fatto qualcosa di simile a questo per http://bookmarkchamp.com - lì volevo rilevare quando un utente ha copiato qualcosa in un campo HTML. L'implementazione che mi è venuta in mente è stata di controllare costantemente il campo per vedere se in qualsiasi momento c'era improvvisamente un sacco di testo lì dentro.

In altre parole: se una volta milisecondo fa non c'era testo, e ora ci sono più di 5 caratteri ... allora l'utente probabilmente ha incollato qualcosa nel campo.

Se vuoi vederlo funzionare in Bookmarkchamp (devi essere registrato), incolla un URL nel campo URL (o trascina e rilascia un URL lì dentro).

Il modo in cui risolverei il problema della conferma di un indirizzo email è il seguente:

1. Prima di eseguire il processo principale, ad esempio la registrazione dell'utente, chiedigli di inserire il proprio indirizzo e-mail.
2. Genera un codice univoco e invialo a quell'indirizzo email.
3. Se l'utente ha inserito l'indirizzo email corretto, riceverà il codice.
4. L'utente deve inserire tale codice insieme al proprio indirizzo e-mail e alle altre informazioni richieste, in modo da poter completare la registrazione. - Si prega di notare che se questa volta viene inserito un indirizzo e-mail (o un codice errato) sbagliato, perché non corrisponde al codice, la registrazione non andrà a buon fine e l'utente verrà immediatamente informato.
5. Se l'indirizzo e-mail, il codice e altre informazioni di registrazione sono stati inseriti correttamente, la registrazione è completa e l'utente può iniziare a utilizzare il sistema immediatamente. - non è necessario rispondere a qualsiasi altro indirizzo email per attivare il proprio account

Per una maggiore sicurezza, il codice dovrebbe avere una durata limitata e dovrebbe essere consentito solo una volta nel processo di registrazione. Inoltre, per prevenire eventuali applicazioni robotiche dannose, è meglio accompagnare il primo passaggio con captcha o un meccanismo simile.

Puoi disabilitare l'opzione copia incolla di jQuery tramite lo script seguente. jQuery ("input"). attr ("onpaste", "return false;");

o utilizzando l' attributo oppaste sotto nei campi di input.

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>