ปิดใช้งานการวางข้อความลงในรูปแบบ HTML

มีวิธีการใช้ JavaScript เพื่อปิดการใช้งานความสามารถในการวางข้อความลงในช่องข้อความในรูปแบบ HTML หรือไม่?

เช่นฉันมีแบบฟอร์มการลงทะเบียนอย่างง่ายซึ่งผู้ใช้จะต้องป้อนอีเมลสองครั้ง รายการอีเมลที่สองคือการตรวจสอบว่าไม่มีการพิมพ์ผิดในรายการอีเมลแรก อย่างไรก็ตามหากผู้ใช้คัดลอก / วางอีเมลของพวกเขานั่นก็จะผิดวัตถุประสงค์และฉันพบว่าผู้ใช้มีปัญหาเนื่องจากป้อนอีเมลผิดและคัดลอก / วาง

บางทีฉันอาจไม่ชัดเจนในคำถามของฉัน แต่ฉันไม่ได้พยายามป้องกันไม่ให้คนอื่นคัดลอก (หรือลากการเลือก) ข้อความบนเบราว์เซอร์ของพวกเขา ฉันแค่ต้องการหยุดพวกเขาจากการวางอินพุตลงในช่องข้อความเพื่อลดข้อผิดพลาดของผู้ใช้

บางทีแทนที่จะใช้ "แฮ็ก" นี้คุณสามารถแนะนำวิธีแก้ไขปัญหาหลักของสิ่งที่ฉันกำลังพยายามแก้ไขอยู่ที่นี่ได้หรือไม่? ฉันได้ทำการทดสอบผู้ใช้ไม่ถึงครึ่งโหลและเกิดขึ้นสองครั้งแล้ว ผู้ชมของฉันไม่มีความสามารถด้านคอมพิวเตอร์ในระดับสูง

เมื่อเร็ว ๆ นี้ฉันต้องปิดการใช้งานการวางในองค์ประกอบฟอร์มอย่างไม่น่าให้อภัย ในการทำเช่นนั้นฉันได้เขียนการใช้งานข้ามเบราว์เซอร์ * ของ Internet Explorer (และอื่น ๆ ) onpaste โซลูชันของฉันต้องไม่ขึ้นอยู่กับไลบรารี JavaScript ของบุคคลที่สาม

นี่คือสิ่งที่ฉันคิดขึ้นมา ไม่ได้ปิดการใช้งานการวางอย่างสมบูรณ์ (เช่นผู้ใช้สามารถวางทีละอักขระได้) แต่ตรงกับความต้องการของฉันและหลีกเลี่ยงการจัดการกับรหัสคีย์ ฯลฯ

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

ในการใช้สิ่งนี้เพื่อปิดการวาง:

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

* ฉันรู้ว่า oninput ไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะ W3C DOM แต่เบราว์เซอร์ทั้งหมดที่ฉันได้ทดสอบรหัสนี้ด้วย - Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - รองรับการป้อนข้อมูลหรือ onpaste จากเบราว์เซอร์เหล่านี้ทั้งหมดมีเพียง Opera เท่านั้นที่ไม่รองรับ onpaste แต่รองรับ oninput

หมายเหตุ: สิ่งนี้จะใช้ไม่ได้กับคอนโซลหรือระบบอื่น ๆ ที่ใช้แป้นพิมพ์บนหน้าจอ (สมมติว่าแป้นพิมพ์บนหน้าจอจะไม่ส่งคีย์ไปยังเบราว์เซอร์เมื่อเลือกแต่ละปุ่ม) หากเป็นไปได้ว่าบุคคลที่มีแป้นพิมพ์บนหน้าจอและ Opera สามารถใช้เพจ / แอปของคุณได้ (เช่น Nintendo Wii โทรศัพท์มือถือบางรุ่น) อย่าใช้สคริปต์นี้เว้นแต่คุณจะทดสอบเพื่อให้แน่ใจว่าแป้นพิมพ์บนหน้าจอ ส่งคีย์ไปยังเบราว์เซอร์หลังจากการเลือกคีย์แต่ละครั้ง

อย่าทำ อย่ายุ่งกับเบราว์เซอร์ของผู้ใช้ การคัดลอก + วางลงในช่องยืนยันอีเมลผู้ใช้ยอมรับความรับผิดชอบในสิ่งที่พิมพ์ ถ้าพวกเขาโง่พอที่จะคัดลอก + วางที่อยู่ที่ผิดพลาด (มันเกิดขึ้นกับฉัน) มันเป็นความผิดของพวกเขาเอง

หากคุณต้องการให้แน่ใจว่าการยืนยันอีเมลใช้งานได้จริงให้ผู้ใช้ตรวจสอบอีเมลของตนในขณะที่ไซต์ของคุณรอ ("โปรดเปิดโปรแกรมเว็บเมลของคุณในหน้าต่างใหม่") แสดงที่อยู่อีเมลเป็นตัวอักษรอ้วนใหญ่ ("อีเมลยืนยันถูกส่งไปที่ .... เกิดข้อผิดพลาดหรือไม่คลิกที่นี่เพื่อเปลี่ยนแปลง)

ยิ่งไปกว่านั้นหากทำได้ให้ผู้ใช้มีสิทธิ์เข้าถึงแบบ จำกัด โดยไม่ต้องยืนยัน ด้วยวิธีนี้พวกเขาสามารถเข้าสู่ระบบได้ทันทีและคุณเพิ่มโอกาสในการติดต่อกับผู้เยี่ยมชมแม้ว่าเมลยืนยันจะถูกบล็อกเนื่องจากสาเหตุอื่น ๆ (เช่นตัวกรองสแปม)

เพิ่มคลาสของ 'disablecopypaste' ให้กับอินพุตที่คุณต้องการปิดใช้งานฟังก์ชันการคัดลอกวางและเพิ่มสคริปต์ jQuery นี้

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

เพียงแค่ได้สิ่งนี้เราก็ทำได้โดยใช้onpaste:"return false"ขอบคุณ: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

เรามีตัวเลือกอื่น ๆ อีกมากมายตามรายการด้านล่าง

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

คุณสามารถ ..... แต่อย่า

คุณไม่ควรแก้ไขพฤติกรรมเริ่มต้นของเบราว์เซอร์ผู้ใช้ การใช้งานเว็บแอปพลิเคชันของคุณแย่มาก นอกจากนี้หากผู้ใช้ต้องการปิดการใช้งานแฮ็กนี้พวกเขาก็สามารถปิดการใช้งานจาวาสคริปต์บนเบราว์เซอร์ได้

เพียงเพิ่มแอตทริบิวต์เหล่านี้ในกล่องข้อความ

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

ความคิดที่บ้าคลั่ง: กำหนดให้ผู้ใช้ส่งอีเมลถึงคุณโดยเป็นส่วนหนึ่งของขั้นตอนการสมัคร เห็นได้ชัดว่าสิ่งนี้จะไม่สะดวกเมื่อคลิกที่ลิงก์ mailto ไม่ได้ผล (เช่นหากใช้เว็บเมล) แต่ฉันเห็นว่าเป็นวิธีรับประกันการพิมพ์ผิดพร้อมกันและยืนยันที่อยู่อีเมล

จะเป็นเช่นนี้: พวกเขากรอกแบบฟอร์มส่วนใหญ่ป้อนชื่อรหัสผ่านและอะไรก็ตาม เมื่อพวกเขากดส่งพวกเขาจะคลิกลิงก์เพื่อส่งอีเมลไปยังเซิร์ฟเวอร์ของคุณ คุณได้บันทึกข้อมูลอื่น ๆ ของพวกเขาไว้แล้วดังนั้นข้อความจะมีเพียงโทเค็นที่ระบุว่าบัญชีนี้ใช้สำหรับบัญชีใด

แล้วการส่งอีเมลยืนยันไปยังที่อยู่อีเมลที่ผู้ใช้กรอกไปสองครั้งซึ่งมีลิงค์ไปยัง URL ยืนยันบนไซต์ของคุณแล้วคุณจะรู้ว่าพวกเขาได้รับข้อความหรือไม่?

ใครก็ตามที่ไม่คลิกเพื่อยืนยันการรับอีเมลอาจป้อนที่อยู่อีเมลของตนไม่ถูกต้อง

ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่เป็นเพียงแนวคิดบางอย่าง

คุณสามารถใช้ jquery

ไฟล์ HTML

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

รหัส jquery

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

หากต้องการขยายคำตอบของ@boycsฉันขอแนะนำให้ใช้ "เปิด" ด้วย

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

หากคุณต้องใช้ช่องอีเมล 2 ช่องและกังวลว่าผู้ใช้จะวางอีเมลที่พิมพ์ผิดเดียวกันจากช่อง 1 ถึงช่อง 2 ไม่ถูกต้องฉันจะบอกว่าแสดงการแจ้งเตือน (หรืออะไรที่ละเอียดกว่า) หากผู้ใช้วางบางอย่างลงในช่องอีเมลที่สอง

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

ด้วยวิธีนี้คุณจะไม่ปิดการใช้งานการวางคุณเพียงแค่แจ้งเตือนอย่างเป็นมิตรกับพวกเขาเพื่อตรวจสอบสิ่งที่พวกเขาคาดว่าพิมพ์ในฟิลด์แรกแล้ววางในฟิลด์ที่สองนั้นถูกต้อง

อย่างไรก็ตามบางทีช่องอีเมลเดียวที่เปิดการเติมข้อความอัตโนมัติไว้เป็นสิ่งที่จำเป็น มีโอกาสที่พวกเขาจะกรอกอีเมลอย่างถูกต้องก่อนหน้านี้ในไซต์อื่นในบางจุดและเบราว์เซอร์จะแนะนำให้กรอกอีเมลนั้น

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

คุณสามารถแนบตัวฟัง "คีย์ดาวน์" เข้ากับช่องป้อนข้อมูลเพื่อตรวจสอบว่ามีการกดแป้น Ctrl + V หรือไม่และหากเป็นเช่นนั้นให้หยุดเหตุการณ์หรือตั้งค่าของช่องป้อนข้อมูลเป็น ""

ซึ่งจะไม่สามารถจัดการกับการคลิกขวาและวางหรือวางจากเมนูแก้ไขของเบราว์เซอร์ได้ คุณอาจต้องเพิ่มตัวนับ "ความยาวสุดท้าย" ให้กับตัวฟังคีย์ดาวน์และใช้ช่วงเวลาเพื่อตรวจสอบความยาวปัจจุบันของฟิลด์เพื่อดูว่าเพิ่มขึ้นตั้งแต่การกดแป้นพิมพ์ครั้งล่าสุดหรือไม่

อย่างไรก็ตามไม่แนะนำ ฟิลด์แบบฟอร์มที่ปิดใช้งานการวางนั้นน่าหงุดหงิดมาก ฉันสามารถพิมพ์อีเมลได้อย่างถูกต้องในครั้งแรกดังนั้นฉันจึงขอสงวนสิทธิ์ในการวางลงในช่องที่สอง

เพิ่มขั้นตอนที่สองในกระบวนการลงทะเบียนของคุณ หน้าแรกตามปกติ แต่เมื่อโหลดซ้ำจะแสดงหน้าที่สองและถามอีเมลอีกครั้ง หากมีความสำคัญผู้ใช้สามารถจัดการได้

จาก

บางคนอาจแนะนำให้ใช้ Javascript เพื่อจับการกระทำของผู้ใช้เช่นคลิกขวาที่เมาส์หรือคีย์ผสม Ctrl + C / Ctrl + V แล้วหยุดการทำงาน แต่นี่ไม่ใช่วิธีแก้ปัญหาที่ดีที่สุดหรือง่ายที่สุด โซลูชันนี้รวมอยู่ในคุณสมบัติของช่องอินพุตพร้อมกับการจับเหตุการณ์โดยใช้ Javascript

ในการปิดใช้งานการเติมข้อความอัตโนมัติของเบราว์เซอร์เพียงแค่เพิ่มแอตทริบิวต์ลงในช่องป้อนข้อมูล ควรมีลักษณะดังนี้:

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

และหากคุณต้องการปฏิเสธการคัดลอกและวางสำหรับฟิลด์นั้นเพียงแค่เพิ่มเหตุการณ์ Javascript ที่บันทึกการโทร oncopy, onpaste และ oncut และทำให้พวกมันส่งคืนเป็นเท็จเช่น:

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

ขั้นตอนต่อไปคือการใช้ onselectstart เพื่อปฏิเสธการเลือกเนื้อหาของช่องป้อนข้อมูลจากผู้ใช้ แต่ขอเตือน: สิ่งนี้ใช้ได้กับ Internet Explorer เท่านั้น ส่วนที่เหลือข้างต้นใช้งานได้ดีกับเบราว์เซอร์หลัก ๆ ทั้งหมด: Internet Explorer, Mozilla Firefox, Apple Safari (บน Windows OS เป็นอย่างน้อย) และ Google Chrome

ตรวจสอบความถูกต้องของระเบียน MX ของโฮสต์ของอีเมลที่ระบุ ซึ่งสามารถกำจัดข้อผิดพลาดทางด้านขวาของเครื่องหมาย @

คุณสามารถทำได้ด้วยการโทร AJAX ก่อนส่งและ / หรือฝั่งเซิร์ฟเวอร์หลังจากส่งแบบฟอร์ม

การใช้ jquery คุณสามารถหลีกเลี่ยงการคัดลอกวางและตัดโดยใช้สิ่งนี้ได้

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

ฉันใช้สารละลายวานิลลา JS นี้:

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

ด้วย Jquery คุณสามารถทำได้ด้วย codeline ง่ายๆ

HTML:

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

รหัส:

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

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

แล้วการใช้ CSS บน UIWebView ล่ะ? สิ่งที่ต้องการ

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

นอกจากนี้คุณสามารถอ่านรายละเอียดเกี่ยวกับบล็อกการคัดลอกวางโดยใช้ CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

วิธีแก้ปัญหาง่ายๆ: เพียงย้อนขั้นตอนการลงทะเบียน: แทนที่จะต้องมีการยืนยันเมื่อสิ้นสุดขั้นตอนการลงทะเบียนขอการยืนยันที่จุดเริ่มต้น! กล่าวคือขั้นตอนการลงทะเบียนเริ่มต้นด้วยแบบฟอร์มง่ายๆเพื่อขอที่อยู่อีเมลและไม่มีอะไรอื่น เมื่อส่งอีเมลพร้อมลิงก์ไปยังหน้ายืนยันที่ไม่ซ้ำกับที่อยู่อีเมลที่ส่งออกไป ผู้ใช้ไปที่หน้านั้นจากนั้นข้อมูลที่เหลือสำหรับการลงทะเบียน (ชื่อผู้ใช้ชื่อนามสกุล ฯลฯ ) จะได้รับการร้องขอ

นี่เป็นเรื่องง่ายเนื่องจากเว็บไซต์ไม่จำเป็นต้องจัดเก็บข้อมูลใด ๆ ก่อนการยืนยันที่อยู่อีเมลสามารถเข้ารหัสด้วยคีย์และแนบเป็นส่วนหนึ่งของที่อยู่ของหน้ายืนยัน

ฉันทำบางอย่างที่คล้ายกับสิ่งนี้สำหรับhttp://bookmarkchamp.com - ที่นั่นฉันต้องการตรวจจับเมื่อผู้ใช้คัดลอกบางสิ่งลงในช่อง HTML การใช้งานที่ฉันคิดขึ้นมาคือการตรวจสอบฟิลด์อย่างต่อเนื่องเพื่อดูว่าเมื่อใดก็ตามที่จู่ๆก็มีข้อความจำนวนมากอยู่ในนั้น

กล่าวอีกนัยหนึ่ง: หากเมื่อมิลลิวินาทีที่แล้วไม่มีข้อความและตอนนี้มีมากกว่า 5 ตัวอักษร ... ผู้ใช้อาจวางบางอย่างในฟิลด์

หากคุณต้องการเห็นการทำงานนี้ใน Bookmarkchamp (คุณต้องลงทะเบียน) ให้วาง URL ลงในช่อง URL (หรือลากและวาง URL ที่นั่น)

วิธีที่ฉันจะแก้ไขปัญหาในการยืนยันที่อยู่อีเมลมีดังนี้:

1. ก่อนที่จะดำเนินการตามขั้นตอนหลักให้พูดว่าลงทะเบียนผู้ใช้ - ขอให้ป้อนที่อยู่อีเมลก่อน
2. สร้างรหัสเฉพาะและส่งไปยังที่อยู่อีเมลนั้น
3. หากผู้ใช้ป้อนที่อยู่อีเมลที่ถูกต้องก็จะได้รับรหัส
4. ผู้ใช้ต้องป้อนรหัสนั้นพร้อมกับที่อยู่อีเมลและข้อมูลที่จำเป็นอื่น ๆ เพื่อให้สามารถลงทะเบียนได้ - โปรดทราบว่าหากครั้งนี้พวกเขาป้อนที่อยู่อีเมลผิด (หรือรหัสผิด) เนื่องจากจะไม่ตรงกับรหัสการลงทะเบียนจะไม่ผ่านและผู้ใช้จะได้รับแจ้งทันที
5. หากป้อนที่อยู่อีเมลรหัสและข้อมูลการลงทะเบียนอื่น ๆ อย่างถูกต้องการลงทะเบียนจะเสร็จสมบูรณ์และผู้ใช้สามารถเริ่มใช้งานระบบได้ทันที - ไม่จำเป็นต้องตอบกลับที่อยู่อีเมลอื่นเพื่อเปิดใช้งานบัญชีของพวกเขา

เพื่อความปลอดภัยที่ดีขึ้นรหัสควรมีอายุการใช้งานที่ จำกัด และควรได้รับอนุญาตเพียงครั้งเดียวในขั้นตอนการลงทะเบียน นอกจากนี้เพื่อป้องกันการใช้งานโรบ็อตที่เป็นอันตรายควรทำตามขั้นตอนแรกด้วย captcha หรือกลไกที่คล้ายกัน

คุณสามารถปิดใช้งานตัวเลือกคัดลอกวางโดย jQuery โดยสคริปต์ร้อง jQuery ("อินพุต"). attr ("onpaste", "return false;");

โดยใช้แอตทริบิวต์oppasteร้องลงในช่องป้อนข้อมูล

onpaste = "กลับเท็จ"

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>