Wyłącz wklejanie tekstu do formularza HTML

Czy istnieje sposób za pomocą JavaScript, aby wyłączyć możliwość wklejania tekstu do pola tekstowego w formularzu HTML?

Np. Mam prosty formularz rejestracyjny, w którym użytkownik musi dwukrotnie wprowadzić swój adres e-mail. Drugi wpis e-mail służy do sprawdzenia, czy w pierwszym wpisie e-mail nie ma błędów. Jednak jeśli użytkownik skopiuje / wklei swój e-mail, to mija się z celem i doświadczam użytkowników, którzy mają problemy, ponieważ wprowadzili niewłaściwy adres e-mail i skopiowali / wklejili go.

Może nie miałem jasności co do mojego pytania, ale nie próbuję uniemożliwić ludziom kopiowania (lub przeciągania zaznaczania) tekstu w ich przeglądarce. Chcę tylko uniemożliwić im wklejanie danych wejściowych do pola tekstowego, aby zminimalizować błąd użytkownika.

Może zamiast tego „hacka” możesz zasugerować inne rozwiązanie podstawowego problemu, który próbuję tutaj rozwiązać? Zrobiłem mniej niż pół tuzina testów użytkowników i zdarzyło się to już dwukrotnie. Moi słuchacze nie mają wysokiego poziomu umiejętności obsługi komputera.

Niedawno musiałem niechętnie wyłączyć wklejanie w elemencie formularza. Aby to zrobić, napisałem implementację obsługi zdarzeń onpaste programu Internet Explorer (i innych) w różnych przeglądarkach *. Moje rozwiązanie musiało być niezależne od bibliotek JavaScript innych firm.

Oto, co wymyśliłem. Nie wyłącza całkowicie wklejania (na przykład użytkownik może wkleić pojedynczy znak na raz), ale spełnia moje potrzeby i pozwala uniknąć konieczności zajmowania się kodami kluczy itp.

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

Aby skorzystać z tego w celu wyłączenia wklejania:

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

* Wiem, że oninput nie jest częścią specyfikacji W3C DOM, ale wszystkie przeglądarki, z którymi testowałem ten kod - Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - obsługują oninput lub onpaste. Ze wszystkich tych przeglądarek tylko Opera nie obsługuje onpaste, ale obsługuje oninput.

Uwaga: to nie zadziała na konsoli lub innym systemie, który używa klawiatury ekranowej (zakładając, że klawiatura ekranowa nie wysyła klawiszy do przeglądarki po wybraniu każdego klawisza). Jeśli to możliwe, że Twoja strona / aplikacja może być używana przez kogoś z klawiaturą ekranową i Operą (np .: Nintendo Wii, niektóre telefony komórkowe), nie używaj tego skryptu, chyba że przetestowałeś, czy klawiatura ekranowa wysyła klucze do przeglądarki po każdym wybraniu klucza.

Nie rób tego. Nie zadzieraj z przeglądarką użytkownika. Poprzez Kopiowanie + Wklejanie do pola potwierdzenia wiadomości e-mail, użytkownik przyjmuje odpowiedzialność za to, co wpisuje. Jeśli są na tyle głupi, by skopiować + wkleić błędny adres (mi się to przytrafiło), to jest to ich własna cholerna wina.

Jeśli chcesz się upewnić, że potwierdzenie e-mail działa, poproś użytkownika o sprawdzenie poczty e-mail podczas oczekiwania witryny („Otwórz program poczty internetowej w nowym oknie”). Pokaż adres e-mail dużymi grubymi literami („Potwierdzenie e-mail zostało wysłane do .... popełnił błąd? Kliknij tutaj, aby zmienić).

Nawet lepiej, jeśli możesz, pozwól użytkownikowi mieć jakiś ograniczony dostęp bez potwierdzania. W ten sposób mogą się zalogować od razu, a Ty zwiększasz swoje szanse na pozostanie w kontakcie z gościem, nawet jeśli wiadomość potwierdzająca zostanie zablokowana z innych powodów (np. Filtry antyspamowe).

Dodaj klasę „disablecopypaste” do danych wejściowych, dla których chcesz wyłączyć funkcję kopiowania wklejania i dodaj ten skrypt jQuery

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

Właśnie to dostałem, możemy to osiągnąć za pomocą onpaste:"return false", dzięki: http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Mamy różne inne dostępne opcje wymienione poniżej.

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

Możesz ..... ale nie rób tego.

Nie należy zmieniać domyślnego zachowania przeglądarki użytkowników. To naprawdę zła użyteczność dla twojej aplikacji internetowej. Ponadto, jeśli użytkownik chce wyłączyć ten hack, może po prostu wyłączyć JavaScript w swojej przeglądarce.

Po prostu dodaj te atrybuty do pola tekstowego

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

Szalony pomysł: wymagaj od użytkownika, aby wysłał Ci wiadomość e-mail w ramach procesu rejestracji. Byłoby to oczywiście niewygodne, gdyby kliknięcie odsyłacza mailto nie działało (na przykład, jeśli używają poczty internetowej), ale uważam to za sposób jednoczesnego zabezpieczenia się przed literówkami i potwierdzenia adresu e-mail.

Wyglądałoby to tak: wypełniają większość formularza, wpisując swoje imię i nazwisko, hasło i tak dalej. Kiedy wysyłają przesyłkę, w rzeczywistości klikają łącze, aby wysłać pocztę na Twój serwer. Zapisałeś już ich inne informacje, więc wiadomość zawiera tylko token z informacją, dla którego konta to jest.

Co powiesz na wysłanie wiadomości e-mail z potwierdzeniem na adres e-mail, który użytkownik właśnie wprowadził dwukrotnie, w którym znajduje się link do adresu URL potwierdzającego w Twojej witrynie, a następnie wiesz, że dostał wiadomość?

Każdy, kto nie kliknął, aby potwierdzić otrzymanie wiadomości e-mail, mógł podać nieprawidłowy adres e-mail.

Nie jest to idealne rozwiązanie, ale tylko kilka pomysłów.

Możesz użyć jquery

Plik HTML

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

kod jQuery

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

Rozszerzając odpowiedź @boycs , polecam również użycie opcji „on”.

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

jeśli musisz użyć 2 pól e-mail i obawiasz się, że użytkownik niepoprawnie wklei ten sam źle wpisany e-mail z pola 1 do pola 2, powiedziałbym, że pokaż alert (lub coś bardziej subtelnego), jeśli użytkownik wklei coś w drugim polu e-mail

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

w ten sposób nie wyłączasz wklejania, po prostu dajesz im przyjazne przypomnienie, aby sprawdzić, co przypuszczalnie wpisali w pierwszym polu, a następnie wkleili w drugim polu, jest prawidłowe.

jednak być może wystarczy jedno pole e-mail z włączonym autouzupełnianiem. prawdopodobnie w pewnym momencie poprawnie wypełnili swój adres e-mail w innej witrynie, a przeglądarka zasugeruje wypełnienie pola tym adresem e-mail

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

Możesz dołączyć odbiornik „keydown” do pola wejściowego, aby wykryć, czy klawisze Ctrl + V są naciskane, a jeśli tak, zatrzymać zdarzenie lub ustawić wartość pola wejściowego na „”.

To jednak nie poradzi sobie z kliknięciem prawym przyciskiem myszy i wklejaniem lub wklejaniem z menu Edycja przeglądarki. Konieczne może być dodanie licznika „ostatniej długości” do nasłuchiwania klawiszy i użycie interwału do sprawdzenia bieżącej długości pola, aby zobaczyć, czy wzrosła od ostatniego naciśnięcia klawisza.

Żadne z nich nie jest jednak zalecane. Pola formularzy z wyłączoną opcją wklejania są niezwykle frustrujące. Za pierwszym razem jestem w stanie poprawnie wpisać swój e-mail, więc zastrzegam sobie prawo do wklejenia go w drugim polu.

Dodaj drugi krok do procesu rejestracji. Pierwsza strona jak zwykle, ale po przeładowaniu, wyświetl drugą stronę i ponownie poproś o e-mail. Jeśli to takie ważne, użytkownik może sobie z tym poradzić.

z

Niektórzy mogą sugerować użycie JavaScript do przechwytywania działań użytkowników, takich jak kliknięcie prawym przyciskiem myszy lub kombinacje klawiszy Ctrl + C / Ctrl + V, a następnie zatrzymanie operacji. Ale to oczywiście nie jest najlepsze ani najprostsze rozwiązanie. Rozwiązanie jest zintegrowane we właściwościach pola wejściowego wraz z przechwytywaniem zdarzeń za pomocą JavaScript.

Aby wyłączyć autouzupełnianie przeglądarek, wystarczy dodać atrybut do pola wejściowego. Powinien wyglądać mniej więcej tak:

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

A jeśli chcesz odmówić kopiowania i wklejania dla tego pola, po prostu dodaj zdarzenie Javascript przechwytujące wywołania oncopy, onpaste i oncut i spraw, aby zwracały fałsz, na przykład:

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

Następnym krokiem jest użycie onselectstart, aby odmówić użytkownikowi wyboru zawartości pola wejściowego, ale ostrzegamy: działa to tylko w przeglądarce Internet Explorer. Reszta powyższych działa świetnie we wszystkich głównych przeglądarkach: Internet Explorer, Mozilla Firefox, Apple Safari (przynajmniej w systemie operacyjnym Windows) i Google Chrome.

Sprawdź ważność rekordu MX hosta podanej wiadomości e-mail. Może to wyeliminować błędy po prawej stronie znaku @.

Możesz to zrobić za pomocą wywołania AJAX przed przesłaniem i / lub po stronie serwera po przesłaniu formularza.

Używając jquery, możesz uniknąć kopiowania, wklejania i wycinania

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

Używam tego waniliowego rozwiązania JS:

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

Dzięki Jquery możesz to zrobić za pomocą jednej prostej linii kodu.

HTML:

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

Kod:

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

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

a co z używaniem CSS w UIWebView? coś jak

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

możesz również przeczytać szczegółowe informacje o blokowaniu kopiowania i wklejania za pomocą CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html

Proste rozwiązanie: po prostu odwróć proces rejestracji: zamiast wymagać potwierdzenia na końcu procesu rejestracji, poproś o potwierdzenie na początku! Tj. Proces rejestracji rozpoczął się od prostego formularza z pytaniem o adres e-mail i nic więcej. Po przesłaniu wiadomość e-mail z łączem do strony potwierdzenia unikalnej dla wysłanego adresu e-mail. Użytkownik przechodzi do tej strony, a następnie wymagane są pozostałe informacje potrzebne do rejestracji (nazwa użytkownika, imię i nazwisko itp.).

Jest to proste, ponieważ strona internetowa nie musi nawet niczego zapisywać przed potwierdzeniem, adres e-mail można zaszyfrować kluczem i dołączyć jako część adresu strony potwierdzenia.

Zrobiłem coś podobnego do tego dla http://bookmarkchamp.com - tam chciałem wykryć, kiedy użytkownik skopiował coś do pola HTML. Wdrożenie, które wymyśliłem, polegało na ciągłym sprawdzaniu pola, aby zobaczyć, czy w którymś momencie nagle pojawiło się tam całe mnóstwo tekstu.

Innymi słowy: jeśli kiedyś milisekundę temu nie było tekstu, a teraz jest więcej niż 5 znaków ... to prawdopodobnie użytkownik wkleił coś w polu.

Jeśli chcesz zobaczyć, jak to działa w Bookmarkchamp (musisz być zarejestrowany), wklej adres URL w pole adresu URL (lub przeciągnij i upuść tam adres URL).

Sposób, w jaki rozwiązałbym kwestię potwierdzenia adresu e-mail jest następujący:

1. Przed przejściem przez główny proces - powiedzmy rejestrację użytkownika - najpierw poproś go o wprowadzenie adresu e-mail.
2. Wygeneruj unikalny kod i wyślij go na ten adres e-mail.
3. Jeśli użytkownik podał poprawny adres e-mail, otrzyma kod.
4. Użytkownik musi wprowadzić ten kod wraz ze swoim adresem e-mail i innymi wymaganymi informacjami, aby móc dokończyć rejestrację. - Należy pamiętać, że jeśli tym razem wpiszą zły adres e-mail (lub zły kod), ponieważ nie będzie pasował do kodu, rejestracja nie zostanie przeprowadzona, a użytkownik zostanie o tym natychmiast poinformowany.
5. Jeśli adres e-mail, kod i inne informacje rejestracyjne zostały wprowadzone poprawnie, rejestracja jest zakończona i użytkownik może natychmiast rozpocząć korzystanie z systemu. - nie trzeba odpowiadać na żaden inny adres e-mail w celu aktywacji konta

Dla większego bezpieczeństwa kod powinien mieć ograniczony czas życia i powinien być dozwolony tylko raz w procesie rejestracji. Ponadto, aby zapobiec wszelkim złośliwym aplikacjom robotów, lepiej jest dołączyć do pierwszego kroku captcha lub podobny mechanizm.

Możesz wyłączyć opcję kopiowania wklejania przez jQuery za pomocą poniższego skryptu. jQuery ("input"). attr ("onpaste", "return false;");

z, używając poniższego atrybutu oppaste w polach wejściowych.

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>