入力フィールドの値は編集できません

Question

私はこのフォームを私のホテル管理システムに持っています。それは部屋のフォームの登録です。ルーム番号はフロア（+ 2〜4桁）に依存します。ここではそれがどのように見えるかです：

だから、フロアルームに渡すこと値は編集可能であってはなりません。これは私が使用javascrpitです：

<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(
     function() { 
      $("#_roomNumber_id").on("keydown", function(e) { 
        if (($(this).get(0).selectionStart == 0 && (e.keyCode < 35 || e.keyCode > 40)) 
         || ($(this).get(0).selectionStart == 1 && e.keyCode == 8)) { 
         return false; 
       } 
       }); 

       $("#_roomNumber_id").bind("contextmenu", function(e) { 
        e.preventDefault(); 
       }); 
      }); 
//]]> 
</script> 

しかし、JavaScriptを行うことを唯一のものは、あなたがこの行($(this).get(0).selectionStart == 1 && e.keyCode == 8)に宣言すると、それはそのようにすべきではない数、全体の値に文字ベースを無効にしていますフロアパスの編集はできません。私は誰かが私を助けることができるといいですありがとうございました。

Answer 1

希望このJS Fiddleはあなたがonchangeイベントハンドラを使用して選択した入力コントロールを無効にするには、簡単なJavaScriptを使用できるソリューション

<input id="field" type="text" value="Basement-" size="10" /> 

<div id="output"> 
</div> 

var readOnlyLength = $('#field').val().length; 

$('#output').text(readOnlyLength); 

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

Answer 2

を取得するのに役立ちます！ ここにサンプルのplunkrがありますhttps://plnkr.co/edit/r1jR75NvI2QfzIiMeHsu?p=preview

Answer 3

ブートストラップの「入力グループ」機能の使用を検討することができます（ブートストラップを使用している場合）。 https://v4-alpha.getbootstrap.com/components/input-group/