HTML 양식에 텍스트 붙여 넣기 비활성화

JavaScript를 사용하여 HTML 양식의 텍스트 필드에 텍스트를 붙여 넣는 기능을 비활성화하는 방법이 있습니까?

예를 들어 사용자가 이메일을 두 번 입력해야하는 간단한 등록 양식이 있습니다. 두 번째 이메일 항목은 첫 번째 이메일 항목에 오타가 없는지 확인하는 것입니다. 그러나 사용자가 이메일을 복사 / 붙여 넣기하면 목적에 맞지 않으며 사용자가 잘못된 이메일을 입력하고 복사 / 붙여 넣기 때문에 문제가 발생했습니다.

내 질문에 대해 명확하지 않았지만 사람들이 브라우저에서 텍스트를 복사 (또는 드래그 선택)하는 것을 막으려는 것은 아닙니다. 사용자 오류를 최소화하기 위해 텍스트 필드에 입력을 붙여 넣는 것을 중지하고 싶습니다 .

아마도이 "해킹"을 사용하는 대신 내가 여기서 해결하려는 핵심 문제에 대한 또 다른 해결책을 제안 할 수 있습니까? 나는 6 개 미만의 사용자 테스트를 수행했으며 이것은 이미 두 번 발생했습니다. 내 청중은 컴퓨터에 능숙하지 않습니다.

최근에 양식 요소에 붙여 넣기를 마지 못해 비활성화해야했습니다. 이를 위해 Internet Explorer (및 기타) onpaste 이벤트 핸들러의 브라우저 간 * 구현을 작성했습니다. 내 솔루션은 타사 JavaScript 라이브러리와 독립적이어야했습니다.

여기에 제가 생각 해낸 것이 있습니다. 붙여 넣기를 완전히 비활성화하지는 않지만 (예를 들어 사용자가 한 번에 하나의 문자를 붙여 넣을 수 있음) 내 요구를 충족하고 keyCode 등을 처리 할 필요가 없습니다.

// 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)는 oninput 또는 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 대답을 확장 하면 "on"도 사용하는 것이 좋습니다.

$('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">

"keydown"리스너를 입력 상자에 연결하여 Ctrl + V 키를 눌렀는지 여부를 감지하고, 그렇다면 이벤트를 중지하거나 입력 상자의 값을 ''로 설정할 수 있습니다.

그러나 브라우저의 편집 메뉴에서 오른쪽 클릭 및 붙여 넣기 또는 붙여 넣기를 처리하지 않습니다. keydown 리스너에 "마지막 길이"카운터를 추가하고 간격을 사용하여 필드의 현재 길이를 확인하여 마지막 키 입력 이후 증가하는지 확인해야 할 수 있습니다.

그러나 둘 다 권장되지 않습니다. 붙여 넣기가 비활성화 된 양식 필드는 매우 실망 스럽습니다. 처음에는 이메일을 올바르게 입력 할 수 있으므로 두 번째 상자에 붙여 넣을 권한이 있습니다.

등록 프로세스에 두 번째 단계를 추가하십시오. 첫 페이지는 평소와 같지만 새로 고침 할 때 두 번째 페이지를 표시하고 이메일을 다시 요청합니다. 중요하다면 사용자가 처리 할 수 ​​있습니다.

...에서

일부는 Javascript를 사용하여 마우스 오른쪽 버튼을 클릭하거나 Ctrl + C / Ctrl + V 키 조합을 클릭 한 다음 작업을 중지하는 등 사용자의 작업을 캡처 할 것을 제안 할 수 있습니다. 그러나 이것은 분명히 최선이거나 가장 간단한 해결책이 아닙니다. 이 솔루션은 Javascript를 사용한 일부 이벤트 캡처와 함께 입력 필드 속성 자체에 통합됩니다.

브라우저의 자동 완성 기능을 비활성화하려면 입력 필드에 속성을 추가하기 만하면됩니다. 다음과 같이 보일 것입니다.

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

해당 필드에 대한 복사 및 붙여 넣기를 거부하려면 다음과 같이 oncopy, onpaste 및 oncut 호출을 캡처하는 Javascript 이벤트를 추가하고 false를 반환하도록합니다.

<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를 사용하면 하나의 간단한 코드 라인으로이를 수행 할 수 있습니다.

HTML :

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

암호:

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

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

UIWebView에서 CSS를 사용하는 것은 어떻습니까? 같은 것

<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. 이메일 주소, 코드 및 기타 등록 정보를 올바르게 입력하면 등록이 완료되고 사용자는 즉시 시스템 사용을 시작할 수 있습니다. -계정을 활성화하기 위해 다른 이메일 주소에 응답 할 필요가 없습니다.

보안을 강화하려면 코드의 수명이 제한되어야하며 등록 프로세스에서 한 번만 허용되어야합니다. 또한 악성 로봇 애플리케이션을 방지하려면 첫 번째 단계에 보안 문자 또는 유사한 메커니즘을 사용하는 것이 좋습니다.

다음 스크립트로 jQuery로 복사 붙여 넣기 옵션을 비활성화 할 수 있습니다. jQuery ( "input"). 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>