如何使用jquery使文本完全不可編輯

Question

當前：文本字段中的文本當前不可編輯，退格按鈕不會刪除任何字符，右鍵單擊剪切復制粘貼功能已被禁用。 但是，一旦在現有的不可編輯文本中添加了一些文本，就可以使用箭頭鍵移至各個字符，並刪除其中一些字符。

目標：我希望將不可編輯的文本固定下來，這樣我就不能使用退格鍵，刪除，右鍵單擊剪切剪切粘貼以及最重要的是使用箭頭鍵刪除。 我希望使用JQuery完成此操作。

代碼如下：

xhtml：

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

jsscript：$（document）.ready（function（）{
$（'。servicename'）。on（“ contextmenu”，function（e）{return false;}）; }）;

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

輸出看起來像這樣：
服務名稱：TextNotEditable_addUserTextHere

我的重點是在使用箭頭鍵導航后如何禁用任何刪除。 提前致謝。

Answer 1

您可以為您的<input>元素賦予“禁用”屬性，並使用user-select CSS屬性（帶前綴的兼容性）。 JQuery可以切換這些東西以獲得所需的結果，例如，單擊按鈕切換輸入框時，如下所示：

Javascript：

$(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;
}

示例小提琴在這里 -盡情享受！