Nonaktifkan menempelkan teks ke dalam bentuk HTML

Apakah ada cara menggunakan JavaScript untuk menonaktifkan kemampuan menempelkan teks ke dalam bidang teks pada formulir HTML?

Misalnya, saya memiliki formulir pendaftaran sederhana di mana pengguna diharuskan memasukkan email dua kali. Entri email kedua adalah untuk memverifikasi bahwa tidak ada kesalahan ketik di entri email pertama. Namun jika pengguna menyalin / menempel email mereka maka itu bertentangan dengan tujuan dan saya telah mengalami pengguna mengalami masalah karena mereka memasukkan email yang salah dan menyalin / menempelkannya.

Mungkin pertanyaan saya tidak jelas, tetapi saya tidak mencoba mencegah orang menyalin (atau menyeret pilihan) teks di browser mereka. Saya hanya ingin menghentikan mereka dari menempelkan masukan ke dalam bidang teks untuk meminimalkan kesalahan pengguna.

Mungkin alih-alih menggunakan "retasan" ini, Anda dapat menyarankan solusi lain untuk masalah inti dari apa yang saya coba selesaikan di sini? Saya telah melakukan kurang dari setengah lusin pengujian pengguna dan ini sudah terjadi dua kali. Audiens saya tidak memiliki kemampuan komputer tingkat tinggi.

Baru-baru ini saya harus dengan enggan menonaktifkan penempelan di elemen formulir. Untuk melakukannya, saya menulis implementasi lintas-browser * dari pengendali event onpaste Internet Explorer (dan lainnya). Solusi saya harus independen dari pustaka JavaScript pihak ketiga mana pun.

Inilah yang saya dapatkan. Itu tidak sepenuhnya menonaktifkan penempelan (pengguna dapat menempelkan satu karakter pada satu waktu, misalnya), tetapi memenuhi kebutuhan saya dan menghindari harus berurusan dengan kode kunci, dll.

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

Untuk memanfaatkan ini untuk menonaktifkan penempelan:

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

* Saya tahu oninput bukan bagian dari spesifikasi DOM W3C, tetapi semua browser yang telah saya uji dengan kode ini — Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 — mendukung oninput atau onpaste. Dari semua browser ini, hanya Opera yang tidak mendukung onpaste, tetapi mendukung oninput.

Catatan: Ini tidak akan berfungsi di konsol atau sistem lain yang menggunakan keyboard di layar (dengan asumsi keyboard di layar tidak mengirim tombol ke browser saat setiap tombol dipilih). Jika mungkin halaman / aplikasi Anda dapat digunakan oleh seseorang dengan keyboard di layar dan Opera (misalnya: Nintendo Wii, beberapa ponsel), jangan gunakan skrip ini kecuali Anda telah menguji untuk memastikan keyboard di layar mengirimkan kunci ke browser setelah setiap pemilihan tombol.

Jangan lakukan itu. Jangan main-main dengan browser pengguna. Dengan Menyalin + Menempel ke dalam bidang konfirmasi Email, pengguna menerima tanggung jawab atas apa yang mereka ketik. Jika mereka cukup bodoh untuk menyalin + menempelkan alamat yang salah (itu pernah terjadi pada saya) maka itu adalah kesalahan mereka sendiri.

Jika Anda ingin memastikan bahwa konfirmasi E-Mail berhasil, minta pengguna memeriksa E-Mail mereka sementara situs Anda menunggu ("Silakan buka program webmail Anda di jendela baru"). Tunjukkan alamat E-Mail dengan huruf besar dan tebal ("E-Mail konfirmasi telah dikirim ke .... membuat kesalahan? Klik di sini untuk mengubah).

Lebih baik lagi, jika Anda bisa, biarkan pengguna memiliki semacam akses terbatas tanpa konfirmasi. Dengan begitu, mereka dapat langsung masuk dan Anda meningkatkan peluang Anda untuk tetap berhubungan dengan pengunjung meskipun email konfirmasi diblokir karena alasan lain (mis. Filter spam).

Tambahkan kelas 'disablecopypaste' ke input yang ingin Anda nonaktifkan fungsi salin tempelnya dan tambahkan skrip jQuery ini

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

Baru saja mendapatkan ini, kita dapat mencapainya dengan menggunakan onpaste:"return false", terima kasih kepada: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Kami memiliki berbagai opsi lain yang tersedia seperti yang tercantum di bawah ini.

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

Anda bisa ..... tapi jangan.

Anda tidak boleh mengubah perilaku default browser pengguna. Ini benar-benar kegunaan yang buruk untuk aplikasi web Anda. Juga jika pengguna ingin menonaktifkan peretasan ini maka mereka dapat menonaktifkan javascript di browser mereka.

Cukup tambahkan atribut ini ke kotak teks

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

Ide gila: Wajibkan pengguna untuk mengirimi Anda email sebagai bagian dari proses pendaftaran. Ini jelas akan merepotkan jika mengklik link mailto tidak berfungsi (jika mereka menggunakan webmail, misalnya), tetapi saya melihatnya sebagai cara untuk menjamin secara bersamaan terhadap kesalahan ketik dan mengkonfirmasi alamat email.

Ini akan berjalan seperti ini: Mereka mengisi sebagian besar formulir, memasukkan nama, kata sandi, dan yang lainnya. Saat mereka mengirim email, mereka sebenarnya mengklik link untuk mengirim email ke server Anda. Anda telah menyimpan informasi mereka yang lain, jadi pesan tersebut hanya menyertakan token yang mengatakan untuk akun mana ini.

Bagaimana kalau mengirim email konfirmasi ke alamat email yang baru dua kali dimasukkan pengguna yang di dalamnya terdapat link ke URL konfirmasi di situs Anda, lalu Anda tahu bahwa mereka sudah mendapat pesan tersebut?

Siapapun yang tidak mengklik untuk mengkonfirmasi penerimaan email mungkin telah salah memasukkan alamat email mereka.

Bukan solusi sempurna, tapi hanya beberapa ide.

Anda bisa menggunakan jquery

File HTML

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

kode jquery

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

Memperluas jawaban @boycs , saya akan merekomendasikan juga menggunakan "on".

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

jika Anda harus menggunakan 2 bidang email dan khawatir tentang pengguna yang salah menempelkan email salah ketik yang sama dari bidang 1 ke bidang 2 maka saya akan mengatakan tampilkan peringatan (atau sesuatu yang lebih halus) jika pengguna menempelkan sesuatu ke bidang email kedua

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

dengan cara ini Anda tidak menonaktifkan tempel, Anda cukup memberi mereka pengingat untuk memeriksa apa yang mungkin mereka ketikkan di bidang pertama dan kemudian ditempelkan ke bidang kedua sudah benar.

namun, mungkin hanya satu bidang email dengan pelengkapan otomatis yang diperlukan. kemungkinan besar mereka telah mengisi email dengan benar sebelum di situs lain di beberapa titik dan browser akan menyarankan untuk mengisi kolom dengan email tersebut

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

Anda dapat melampirkan pendengar "keydown" ke kotak masukan untuk mendeteksi apakah tombol Ctrl + V sedang ditekan atau tidak dan, jika demikian, hentikan acara atau setel nilai kotak masukan ke ''.

Itu tidak akan menangani klik kanan dan tempel atau tempel dari menu Edit di browser. Anda mungkin perlu menambahkan penghitung "panjang terakhir" ke pendengar penurunan tombol dan menggunakan interval untuk memeriksa panjang bidang saat ini untuk melihat apakah bertambah sejak penekanan tombol terakhir.

Tidak ada yang disarankan. Bidang formulir dengan penonaktifan pasta sangat membuat frustrasi. Saya dapat mengetik email saya dengan benar pada kali pertama, jadi saya berhak untuk menempelkannya ke kotak kedua.

Tambahkan langkah kedua ke proses pendaftaran Anda. Halaman pertama seperti biasa, tapi saat reload, tampilkan halaman kedua dan minta email lagi. Jika itu penting, pengguna bisa mengatasinya.

dari

Beberapa orang mungkin menyarankan penggunaan Javascript untuk menangkap tindakan pengguna, seperti mengklik kanan mouse atau kombinasi tombol Ctrl + C / Ctrl + V dan kemudian menghentikan operasi. Tapi ini jelas bukan solusi terbaik atau paling sederhana. Solusinya terintegrasi dalam properti bidang masukan itu sendiri bersama dengan beberapa peristiwa yang menangkap menggunakan Javascript.

Untuk menonaktifkan pelengkapan otomatis browser, cukup tambahkan atribut ke bidang masukan. Seharusnya terlihat seperti ini:

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

Dan jika Anda ingin menolak Salin dan Tempel untuk bidang itu, cukup tambahkan peristiwa Javascript yang menangkap panggilan oncopy, onpaste, dan oncut dan membuatnya kembali salah, seperti:

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

Langkah selanjutnya adalah menggunakan onselectstart untuk menolak pemilihan konten bidang masukan dari pengguna, tetapi berhati-hatilah: ini hanya berfungsi untuk Internet Explorer. Selebihnya di atas berfungsi dengan baik di semua browser utama: Internet Explorer, Mozilla Firefox, Apple Safari (setidaknya pada OS Windows), dan Google Chrome.

Periksa validitas data MX dari host dari email yang diberikan. Ini dapat menghilangkan kesalahan di sebelah kanan tanda @.

Anda dapat melakukan ini dengan panggilan AJAX sebelum mengirimkan dan / atau sisi server setelah formulir dikirimkan.

Dengan menggunakan jquery, Anda dapat menghindari salin dan potong menggunakan ini

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

Saya menggunakan solusi JS vanilla ini:

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

Dengan Jquery Anda dapat melakukan ini dengan satu codeline sederhana.

HTML:

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

Kode:

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

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

bagaimana dengan menggunakan CSS di UIWebView? sesuatu seperti

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

Anda juga dapat membaca detail tentang blok copy-paste menggunakan CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Solusi sederhana: cukup balikkan proses pendaftaran: alih-alih meminta konfirmasi di akhir proses pendaftaran, minta konfirmasi di awal! Yaitu proses pendaftaran dimulai dengan formulir sederhana yang menanyakan alamat email dan tidak ada yang lain. Setelah pengiriman, email dengan link ke halaman konfirmasi khusus untuk alamat email dikirim. Pengguna pergi ke halaman itu, lalu informasi lainnya untuk pendaftaran (nama pengguna, nama lengkap, dll.) Akan diminta.

Ini sederhana karena situs web bahkan tidak perlu menyimpan apa pun sebelum konfirmasi, alamat email dapat dienkripsi dengan kunci dan dilampirkan sebagai bagian dari alamat halaman konfirmasi.

Saya melakukan sesuatu yang mirip dengan ini untuk http://bookmarkchamp.com - di sana saya ingin mendeteksi ketika pengguna menyalin sesuatu ke dalam bidang HTML. Implementasi yang saya hasilkan adalah memeriksa lapangan secara konstan untuk melihat apakah sewaktu-waktu ada banyak teks di sana.

Dengan kata lain: jika satu milidetik yang lalu tidak ada teks, dan sekarang ada lebih dari 5 karakter ... maka pengguna mungkin menempelkan sesuatu di bidang.

Jika Anda ingin melihat ini berfungsi di Bookmarkchamp (Anda harus terdaftar), tempelkan URL ke bidang URL (atau seret dan lepas URL di sana).

Cara saya mengatasi masalah mengonfirmasi alamat email adalah sebagai berikut:

1. Sebelum melalui proses utama - misalnya mendaftarkan pengguna - pertama-tama minta mereka untuk memasukkan alamat email mereka.
2. Buat kode unik dan kirimkan ke alamat email itu.
3. Jika pengguna telah memasukkan alamat email yang benar, mereka akan mendapatkan kodenya.
4. Pengguna harus memasukkan kode itu bersama dengan alamat email mereka, dan informasi lain yang diperlukan, sehingga mereka dapat menyelesaikan pendaftaran. - Harap dicatat bahwa jika kali ini mereka memasukkan alamat email yang salah (atau kode yang salah), karena tidak cocok dengan kode, pendaftaran tidak akan dilanjutkan, dan pengguna akan segera diberitahu.
5. Jika alamat email, kode, dan informasi pendaftaran lainnya telah dimasukkan dengan benar, pendaftaran selesai dan pengguna dapat segera mulai menggunakan sistem. - tidak perlu menanggapi alamat email lain untuk mengaktifkan akun mereka

Untuk keamanan yang lebih baik, kode harus memiliki masa pakai yang terbatas, dan hanya boleh diizinkan sekali dalam proses pendaftaran. Selain itu, untuk mencegah aplikasi robot berbahaya, sebaiknya ikuti langkah pertama dengan captcha atau mekanisme serupa.

Anda dapat menonaktifkan opsi salin tempel dengan jQuery dengan skrip di bawah ini. jQuery ("input"). attr ("onpaste", "return false;");

dari dengan menggunakan atribut oppaste di bawah ke dalam field 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>