jqueryを使用してテキストを完全に編集できないようにするには

Question

現在：テキストフィールドのテキストは現在編集できません。バックスペースボタンは文字を削除せず、右クリックしてカットコピー貼り付けを無効にします。ただし、この既存の編集不可能なテキストにテキストを追加すると、矢印キーを使用して文字を移動し、その一部を削除することができます。

対象：編集できないテキストを固定して、バックスペース、削除、右クリックでカットコピー貼り付け、そして最も重要な矢印キーを使用して削除に移動できないようにしたい。私はこれをJQueryを使用して実行したいと思います。

XHTML：

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

jsscript： $（ドキュメント）.ready（関数（）{
$（ 'サービス名を'）次のように

コードです。 on（ "contextmenu"、function（e）{ false false; }）; }）;
サービス名：TextNotEditable_addUserTextHere

私の焦点は、私は、矢印キーを使って移動した後の任意の削除を無効にすることができる方法である

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

出力は次のようになります。前もって感謝します。

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

Example fiddle here - お楽しみください！