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.
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;
}
});
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
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.