Wert des Eingabefeldes sollte nicht editierbar sein

Question

Ich habe dieses Formular in meinem Hotel Management System. Es ist die Registrierung der Raumform. Die Zimmernummer hängt also vom Stockwerk ab (+ 2 bis 4 Ziffern). Hier ist, wie es aussieht:

So ist der Wert, der der Bodenpass auf dem Zimmer nicht bearbeitet werden soll. Dies ist die javascrpit, die ich benutze:

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

Aber das einzige, was die Javascript ist tun, um die Zeichen Basis der Anzahl deaktivieren, die Sie auf dieser Linie erklären ($(this).get(0).selectionStart == 1 && e.keyCode == 8) und es sollte nicht so sein, der gesamte Wert der Bodenpass sollte nicht bearbeitbar sein. Ich hoffe, dass mir jemand helfen kann. Vielen Dank.

Answer 1

Hope this JS Fiddle hilft Ihnen, die Lösung zu erhalten

<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

Sie einfach Javascript können Sie die Auswahleingangskontrolle unter Verwendung der onchange Ereignishandler deaktivieren! hier geht ein Beispiel plunkr https://plnkr.co/edit/r1jR75NvI2QfzIiMeHsu?p=preview

Answer 3

Sie könnten die Verwendung der "Input Group" -Funktion von Bootstrap (wenn Sie Bootstrap verwenden, das ist). Siehe diesen Link: https://v4-alpha.getbootstrap.com/components/input-group/