jquery

Question

ile metni tamamen düzenlenemez hale getirebilirim Geçerli: Metin alanındaki metin şu anda düzenlenemez, arka boşluk düğmesi hiçbir karakteri silmez ve kopyala-yapıştır yapıştırmak için sağ tıklatılmaz. Bununla birlikte, bu mevcut düzenlenemeyen metne biraz metin eklediğimde, ok tuşlarını kullanarak karakterlerin içinden geçebilir ve bazılarını silebilirim.

Hedef: Silinmeye geçmek için sağ tuşla, silme, kopyala-yapıştır ile sağ tıklama ve en önemlisi ok tuşlarını kullanamayacağım şekilde düzeltilemez metni düzeltmek istiyorum. Bunun JQuery kullanılarak yapılmasını istiyorum. aşağıdaki gibi

kodudur:

xhtml:

$(document).ready(function() { 
    $('#contenttitle').html($('.hiddenbred').html()); 
    $('.newsflash').css('display','none'); 
    disableHalfText(); 
} 

jsscript: 'hizmetadı' $ (document) .ready (function() {
$(). on ("contextmenu", işlev (e) { döndürme yanlış; }); });
Hizmet adı: TextNotEditable_addUserTextHere

Benim odak noktası i ok tuşlarını kullanarak gezinme sonra herhangi silme devre dışı bırakabilir nasıl

function disableHalfText(){ 

var readOnlyLength = $('.servicename').val().length; 

$('.servicename').on('keydown', function(event) { 
    var $field = $(this); 
    if ((event.which != 37 && (event.which != 39)) 
      && ((this.selectionStart < readOnlyLength) 
        || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) { 
     return false; 
     } 
    }); 
} 

çıktı şuna benzer. Şimdiden teşekkürler.

Answer 1

<input> öğenize "disabled" özelliğini verebilirsiniz ve user-select CSS özelliğini (uyumluluk için öneklerle birlikte) kullanabilirsiniz. JQuery, istenen sonuçları elde etmek için bunları değiştirebilir, örn.

JavaScript: olduğu gibi giriş kutusu geçiş yapmak için bir düğmeye tıklandığında

$(document).on('click tap', '#toggle-button', function() { 
    var current = $(".input-toggle").prop("disabled"); // Get current state: disabled = true? 

    $(".input-toggle") 
     .prop("disabled", !current) // set to the opposite of the current state 
     .toggleClass('no-select'); // don't let the user select! 

}); 

CSS:

no-select { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Example fiddle here - tadını çıkarın!