Metni HTML formuna yapıştırmayı devre dışı bırakın

HTML formundaki bir metin alanına metin yapıştırma özelliğini devre dışı bırakmak için JavaScript kullanmanın bir yolu var mı?

Örneğin, kullanıcının e-postasını iki kez girmesi gereken basit bir kayıt formum var. İkinci e-posta girişi, ilk e-posta girişinde yazım hatası olmadığını doğrulamak içindir. Bununla birlikte, kullanıcı e-postasını kopyalar / yapıştırırsa, bu amacın yerine geçer ve yanlış e-postayı girip kopyalayıp yapıştırdıkları için kullanıcılarla ilgili sorunlar yaşıyorum.

Belki sorum konusunda net değildim ama insanların tarayıcılarındaki metni kopyalamalarını (veya sürükleyerek seçmelerini) engellemeye çalışmıyorum. Kullanıcı hatasını en aza indirmek için girişleri bir metin alanına yapıştırmalarını engellemek istiyorum .

Belki de bu "hack" i kullanmak yerine burada çözmeye çalıştığım şeyin temel sorununa başka bir çözüm önerebilirsiniz? Yarım düzineden daha az kullanıcı testi yaptım ve bu zaten iki kez oldu. Hedef kitlemin yüksek düzeyde bilgisayar yeterliliği yok.

Son zamanlarda bir form öğesinde yapıştırmayı gönülsüzce devre dışı bırakmak zorunda kaldım. Bunu yapmak için, Internet Explorer'ın (ve diğerlerinin) onpaste olay işleyicisinin tarayıcılar arası * bir uygulamasını yazdım. Çözümüm herhangi bir üçüncü taraf JavaScript kitaplığından bağımsız olmalıydı.

İşte bulduğum şey. Yapıştırmayı tamamen devre dışı bırakmaz (örneğin, kullanıcı bir seferde tek bir karakter yapıştırabilir), ancak ihtiyaçlarımı karşılar ve keyCodes vb. İle uğraşmak zorunda kalmaz.

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

Yapıştırmayı devre dışı bırakmak için bundan yararlanmak için:

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

* Girişin W3C DOM spesifikasyonunun bir parçası olmadığını biliyorum, ancak bu kodu test ettiğim tüm tarayıcılar — Chrome 2, Safari 4, Firefox 3, Opera 10, IE6, IE7 - giriş veya onpaste'i destekliyor. Tüm bu tarayıcılardan yalnızca Opera, onpaste'i desteklemiyor, ancak oninput'u destekliyor.

Not: Bu, ekran klavyesi kullanan bir konsolda veya başka bir sistemde çalışmaz (ekran klavyesinin her tuş seçildiğinde tarayıcıya tuşları göndermediği varsayılırsa). Sayfanızın / uygulamanızın ekran klavyesi ve Opera kullanan biri tarafından kullanılma olasılığı varsa (örneğin: Nintendo Wii, bazı cep telefonları), ekran klavyesinin olduğundan emin olmak için test yapmadıysanız bu komut dosyasını kullanmayın her tuş seçiminden sonra tarayıcıya anahtarları gönderir.

Yapma. Kullanıcının tarayıcısıyla uğraşmayın. Bir E-Posta onay alanına Kopyala + Yapıştırarak, kullanıcı yazdıklarının sorumluluğunu kabul eder. Hatalı bir adresi kopyalayıp yapıştıracak kadar aptal iseler (benim başıma geldi) o zaman bu onların lanet olası hatasıdır.

E-Posta onayının çalıştığından emin olmak istiyorsanız, siteniz beklerken kullanıcının E-postasını kontrol etmesini sağlayın ("Lütfen web posta programınızı yeni bir pencerede açın"). E-Posta adresini büyük harflerle gösterin ("E-Postanın gönderildiği onaylama bir hata mı yaptı? Değiştirmek için burayı tıklayın).

Daha da iyisi, eğer yapabiliyorsanız, kullanıcının onaylamadan bir tür sınırlı erişime sahip olmasına izin verin. Bu şekilde, hemen oturum açabilirler ve onay postası başka nedenlerle (örneğin, spam filtreleri) engellenmiş olsa bile, ziyaretçiyle iletişim halinde kalma şansınızı artırırsınız.

Kopyalama yapıştırma işlevini devre dışı bırakmak istediğiniz girişlere bir 'copycopypaste' sınıfı ekleyin ve bu jQuery betiğini ekleyin

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

Bunu şimdi anladım, şunu kullanarak başarabiliriz onpaste:"return false": http://sumtips.com/2011/11/prevent-copy-cut-paste-text-field.html

Aşağıda listelenen çeşitli diğer seçeneklerimiz mevcuttur.

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

Yapabilirsin ..... ama yapma.

Bir kullanıcı tarayıcısının varsayılan davranışını değiştirmemelisiniz. Web uygulamanız için gerçekten kötü bir kullanılabilirlik. Ayrıca, bir kullanıcı bu hack'i devre dışı bırakmak isterse, tarayıcısında javascript'i devre dışı bırakabilir.

Bu nitelikleri metin kutusuna eklemeniz yeterli

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

Çılgın fikir: Kullanıcının kayıt işleminin bir parçası olarak size bir e-posta göndermesini isteyin. Bu, bir mailto bağlantısına tıklamak işe yaramadığında (örneğin, web postası kullanıyorlarsa) açık bir şekilde sakıncalı olurdu, ancak bunu aynı anda yazım hatalarını garanti etmenin ve e-posta adresini doğrulamanın bir yolu olarak görüyorum.

Şöyle olurdu: Formun çoğunu doldururlar, adlarını, şifrelerini ve diğerlerini girerler. Gönder'e bastıklarında, sunucunuza posta göndermek için bir bağlantıya tıklarlar. Diğer bilgilerini zaten kaydetmişsinizdir, bu nedenle mesaj yalnızca bunun hangi hesap için olduğunu belirten bir belirteç içerir.

Kullanıcının iki kez girdiği e-posta adresine, sitenizde bir onay URL'sine bağlantı bulunan bir onay e-postası göndermeye ne dersiniz?

E-postanın alındığını onaylamak için tıklamayan herkes, e-posta adresini yanlış girmiş olabilir.

Mükemmel bir çözüm değil, sadece bazı fikirler.

Jquery kullanabilirsiniz

HTML dosyası

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

jquery kodu

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

@Boycs yanıtını genişletmek için "on" kullanmanızı da tavsiye ederim.

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

2 e-posta alanı kullanmanız gerekiyorsa ve kullanıcının aynı yanlış yazılmış e-postayı 1. alandan 2. alana yapıştırmasından endişe duyuyorsanız, kullanıcı ikinci e-posta alanına bir şey yapıştırırsa bir uyarı (veya daha ince bir şey) göster derim.

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

bu şekilde yapıştırmayı devre dışı bırakmazsanız, onlara muhtemelen ilk alana yazdıklarını ve ardından ikinci alana yapıştırdıklarını kontrol etmeleri için dostça bir hatırlatma verirsiniz.

ancak, belki de tek gereken, otomatik tamamlamanın açık olduğu tek bir e-posta alanıdır. Bir noktada başka bir sitede daha önce e-postalarını doğru bir şekilde doldurmuş olabilirler ve tarayıcı alanı bu e-postayla doldurmanızı önerecektir.

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

Ctrl + V tuşlarına basılıp basılmadığını algılamak için giriş kutusuna bir "tuş basma" dinleyicisi ekleyebilir ve öyleyse, olayı durdurabilir veya giriş kutusunun değerini '' olarak ayarlayabilirsiniz.

Yine de bu, tarayıcının Düzen menüsünden sağ tıklayıp yapıştırma veya yapıştırma işlemini gerçekleştirmez. Keydown dinleyicisine bir "son uzunluk" sayacı eklemeniz ve son tuş vuruşundan bu yana artıp artmadığını görmek için alanın geçerli uzunluğunu kontrol etmek için bir aralık kullanmanız gerekebilir.

Yine de tavsiye edilmez. Yapıştırmanın devre dışı bırakıldığı form alanları son derece sinir bozucu. E-postamı ilk seferde doğru yazabiliyorum, bu yüzden ikinci kutuya yapıştırma hakkımı saklı tutuyorum.

Kayıt sürecinize ikinci bir adım ekleyin. İlk sayfa her zamanki gibi, ancak yeniden yüklendiğinde, ikinci bir sayfa göster ve e-postayı tekrar sor. Bu kadar önemliyse, kullanıcı bunu halledebilir.

itibaren

Bazıları, fareyi veya Ctrl + C / Ctrl + V tuş kombinasyonlarını sağ tıklama ve ardından işlemi durdurma gibi kullanıcıların eylemlerini yakalamak için Javascript kullanılmasını önerebilir. Ancak bu açıkça en iyi veya en basit çözüm değildir. Çözüm, Javascript kullanarak bazı olay yakalama ile birlikte giriş alanı özelliklerine entegre edilmiştir.

Tarayıcının otomatik tamamlamasını devre dışı bırakmak için, özelliği giriş alanına eklemeniz yeterlidir. Bunun gibi bir şeye benzemeli:

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

Ve bu alan için Kopyala ve Yapıştır'ı reddetmek istiyorsanız, çağrıları oncopy, onpaste ve oncut yakalayan Javascript olayını ekleyin ve aşağıdaki gibi bunların false döndürmesini sağlayın:

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

Bir sonraki adım, onselectstart'ı kullanarak giriş alanının içerik seçimini kullanıcıdan reddetmek, ancak uyarılmaktır: bu yalnızca Internet Explorer için çalışır. Yukarıdakilerin geri kalanı tüm büyük tarayıcılarda harika çalışıyor: Internet Explorer, Mozilla Firefox, Apple Safari (en azından Windows işletim sisteminde) ve Google Chrome.

Verilen e-postanın ana bilgisayarının MX kaydının geçerliliğini kontrol edin. Bu, @ işaretinin sağındaki hataları ortadan kaldırabilir.

Bunu göndermeden önce bir AJAX çağrısıyla ve / veya form gönderildikten sonra sunucu tarafında yapabilirsiniz.

Jquery kullanarak, kopyalayıp yapıştırmayı ve bunu kullanarak kesmeyi önleyebilirsiniz.

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

Bu vanilya JS çözümünü kullanıyorum:

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

Jquery ile bunu basit bir kod hattıyla yapabilirsiniz.

HTML:

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

Kod:

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

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

UIWebView'da CSS kullanmaya ne dersiniz? gibi bir şey

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

ayrıca CSS http://rakaz.nl/2009/09/iphone-webapps-101-getting-safari-out-of-the-way.html kullanarak blok kopyala-yapıştır ile ilgili ayrıntıları okuyabilirsiniz.

Basit çözüm: kayıt sürecini tersine çevirin: kayıt işleminin sonunda onay istemek yerine, başında onay isteyin! Yani kayıt işlemi, e-posta adresi soran basit bir formla başladı, başka hiçbir şey yoktu. Gönderildikten sonra, gönderilen e-posta adresine özel bir onay sayfasına bağlantı içeren bir e-posta. Kullanıcı o sayfaya gider, ardından kayıt için geri kalan bilgiler (kullanıcı adı, tam adı vb.) İstenir.

Bu basittir, çünkü web sitesinin onaydan önce herhangi bir şey saklamasına bile gerek yoktur, e-posta adresi bir anahtarla şifrelenebilir ve onay sayfası adresinin bir parçası olarak eklenebilir.

Http://bookmarkchamp.com için buna benzer bir şey yaptım - orada bir kullanıcının bir HTML alanına bir şey kopyaladığını tespit etmek istedim. Ortaya çıkardığım uygulama, herhangi bir zamanda aniden orada çok fazla metin olup olmadığını görmek için alanı sürekli kontrol etmekti.

Başka bir deyişle: bir milisaniye önce hiç metin yoksa ve şimdi 5'ten fazla karakter varsa ... o zaman kullanıcı muhtemelen alana bir şey yapıştırmıştır.

Bunun Bookmarkchamp'ta çalıştığını görmek istiyorsanız (kaydolmanız gerekir), URL alanına bir URL yapıştırın (veya oraya bir URL sürükleyip bırakın).

Bir e-posta adresini onaylama sorununu çözme yöntemim aşağıdaki gibidir:

1. Ana işlemden geçmeden önce - örneğin kullanıcıyı kaydettirin - önce ondan e-posta adresini girmesini isteyin.
2. Benzersiz bir kod oluşturun ve bu e-posta adresine gönderin.
3. Kullanıcı doğru e-posta adresini girdiyse, kodu alacaktır.
4. Kaydı tamamlayabilmeleri için kullanıcı, e-posta adresiyle birlikte bu kodu ve diğer gerekli bilgileri girmelidir. - Bu sefer yanlış bir e-posta adresi (veya yanlış bir kod) girerlerse, kodla eşleşmeyeceği için kaydın yapılmayacağını ve kullanıcıya hemen bilgi verileceğini lütfen unutmayın.
5. E-posta adresi, kod ve diğer kayıt bilgileri doğru girilmişse, kayıt tamamlanmış demektir ve kullanıcı sistemi hemen kullanmaya başlayabilir. - hesaplarını etkinleştirmek için başka herhangi bir e-posta adresine yanıt vermenize gerek yok

Daha iyi güvenlik için, kodun sınırlı bir ömrü olmalı ve kayıt sürecinde yalnızca bir kez kullanılmasına izin verilmelidir. Ayrıca herhangi bir kötü niyetli robot uygulamasının önüne geçmek için ilk adıma captcha veya benzeri bir mekanizma ile eşlik etmek daha iyidir.

Kopyala yapıştır seçeneğini jQuery ile aşağıdaki komut dosyasıyla devre dışı bırakabilirsiniz. jQuery ("girdi"). attr ("onpaste", "return false;");

aşağıdaki muhalefeti kullanarakgiriş alanlarına özniteliğini .

onpaste = "yanlış dönüş;"

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>