Disabilita incollare il testo in formato HTML

Question

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

es. Ho un semplice modulo di registrazione in cui l'utente è tenuto a inserire due volte la propria e-mail. La seconda voce e-mail è verificare che non vi siano errori di battitura nella prima voce e-mail. Tuttavia, se l'utente copia / incolla la propria e-mail, allora ciò non soddisfa lo scopo e ho riscontrato problemi agli utenti perché hanno inserito l'e-mail 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 loro 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 principale di ciò che sto cercando di risolvere qui? Ho fatto 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.

Answer 1

Di recente ho dovuto disabilitare a malincuore l'incollamento in un elemento del modulo. Per fare ciò, 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'incollamento (l'utente può incollare un singolo carattere alla volta, ad esempio), ma soddisfa le mie esigenze ed evita di dover gestire KeyCode, 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 che ho testato questo codice con & # 8212; Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 & # 8212; supporta oninput o onpaste. Di tutti questi browser, solo Opera non supporta onpaste, ma supporta oninput.

Nota: questo non funzionerà su una console o su un altro sistema che utilizza una tastiera su schermo (supponendo che la tastiera su schermo non invii i tasti al browser quando ciascun 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 chiavi.

Answer 2

Non farlo. Non scherzare con il browser dell'utente. Copiando + Incollando in un campo di conferma e-mail, l'utente si assume la responsabilità di ciò che digitano. Se sono abbastanza stupidi da copiare + incollare un indirizzo difettoso (mi è successo), allora è un loro maledetto errore.

Se vuoi assicurarti che la conferma via e-mail funzioni, chiedi all'utente di controllare la sua e-mail mentre il tuo sito è in attesa (" Apri il tuo programma di webmail in una nuova finestra "). Mostra l'indirizzo e-mail in grandi lettere maiuscole (" L'e-mail di conferma inviata a .... ha fatto un errore? Clicca qui per cambiare).

Ancora meglio, se puoi, lascia che l'utente abbia qualche tipo di accesso limitato senza confermare. In questo modo, possono accedere immediatamente e migliorare le tue possibilità di rimanere in contatto con il visitatore anche se l'email di conferma è bloccata per altri motivi (ad es. Filtri antispam).

Answer 3

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

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

Answer 4

Appena arrivato, possiamo ottenerlo 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>

Answer 5

Puoi ..... ma non.

Non dovresti alterare il comportamento predefinito di un browser degli utenti. È 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”

Answer 6

Pazza idea: è necessario che l'utente ti invii un'email come parte del processo di registrazione. Ciò 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 simultaneamente contro errori di battitura e confermare l'indirizzo e-mail.

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 per quale account si tratta.

Answer 7

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, allora sai che hanno ricevuto il messaggio?

Chi non fa 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.

Answer 8

Estensione della @boycs , ti consiglio di utilizzare anche " on " ;.

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

Answer 9

Puoi usare jquery

File HTML

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

codice jquery

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

Answer 10

se devi usare 2 campi e-mail e sei preoccupato che l'utente incolli erroneamente 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 email

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

in questo modo non disabiliti il ??comando incolla, basta dare loro un amichevole promemoria per verificare cosa hanno presumibilmente digitato nel primo campo e incollato nel secondo campo è corretto.

tuttavia, forse è sufficiente un solo campo e-mail con il completamento automatico attivato. è probabile che abbiano riempito correttamente la loro e-mail prima su un altro sito ad un certo punto e il browser suggerirà di riempire il campo con quell'e-mail

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

Answer 11

Puoi allegare un " keydown " ascolta la casella di input per rilevare se vengono premuti 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 tasto destro e incolla o incolla dal menu Modifica del browser. Potrebbe essere necessario aggiungere un " last length " in contrasto con il listener di keydown e utilizzare un intervallo per verificare la lunghezza corrente del campo per vedere se aumenta dall'ultima pressione di tasti.

Nessuno dei due è raccomandato, comunque. I campi modulo con incolla disabilitato sono estremamente frustranti. Sono in grado di digitare correttamente la mia e-mail la prima volta, quindi mi riservo il diritto di incollarla nella seconda casella.

Answer 12

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'e-mail. Se è così importante, l'utente può gestirlo.

Answer 13

da

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

Per disabilitare il completamento automatico del browser, è sufficiente aggiungere l'attributo al campo di input. Dovrebbe assomigliare 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 rendili false, in questo modo:

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

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

Answer 14

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

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

Answer 15

Uso questa soluzione JS alla vaniglia:

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

Answer 16

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/

Answer 17

che dire dell'utilizzo dei CSS su UIWebView? qualcosa come

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

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

Answer 18

Soluzione semplice: basta invertire il processo di registrazione: invece di richiedere la conferma al termine del processo di registrazione, richiedere la conferma all'inizio! Cioè il processo di registrazione è iniziato con un semplice modulo che richiede l'indirizzo e-mail e nient'altro. Al momento dell'invio, un'e-mail con collegamento a una pagina di conferma univoca dell'indirizzo e-mail inviato. L'utente accede a 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 archiviare nulla prima della conferma, l'indirizzo e-mail può essere crittografato con una chiave e allegato come parte dell'indirizzo della pagina di conferma.

Answer 19

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 è stata quella di controllare costantemente il campo per vedere se in qualsiasi momento ci fosse improvvisamente un sacco di testo lì dentro.

In altre parole: se una volta millisecondi fa non c'era testo e ora ci sono più di 5 caratteri ... allora probabilmente l'utente 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).

Answer 20

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

1. Prima di seguire la procedura principale, ad esempio registrando l'utente, chiedi loro di inserire il loro indirizzo e-mail.
2. Genera un codice univoco e invialo a quell'indirizzo email.
3. Se l'utente ha inserito l'indirizzo e-mail corretto, riceverà il codice.
4. L'utente deve inserire quel 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 inseriscono un indirizzo e-mail errato (o un codice errato), poiché non corrisponde al codice, la registrazione non verrà eseguita 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 immediatamente a utilizzare il sistema. - non è necessario rispondere a nessun altro indirizzo e-mail per attivare il proprio account

Per una migliore sicurezza, il codice dovrebbe avere una durata limitata e dovrebbe essere consentito solo una volta nel processo di registrazione. Inoltre, al fine di prevenire eventuali applicazioni di robot dannosi, è meglio accompagnare il primo passo con captcha o un meccanismo simile.

Answer 21

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

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

Answer 22

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>