输入字段的值不可编辑

Question

I have this form in my Hotel Management System. It's the registration of Room form. So the Room Number depends on the Floor (+ 2 to 4 digits). Here's how it looks:

So the value that the Floor pass on the Room should not be editable. This is the javascrpit that I use:

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

But the only thing that the javascript do is disable the characters base on the number that you declare on this line ($(this).get(0).selectionStart == 1 && e.keyCode == 8) and it shouldn't be like that, the whole value of the floor pass should not be editable. I hope someone can help me. Thank you.

Answer 1

Hope this JS Fiddle helps you to get the solution

<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

You can use simple javascript to disable the select input control by using the onchange event handler! here goes a sample plunkr https://plnkr.co/edit/r1jR75NvI2QfzIiMeHsu?p=preview

Answer 3

You could consider using the "Input Group" feature of bootstrap (if you're using bootstrap, that is). See this link: https://v4-alpha.getbootstrap.com/components/input-group/