How to make only some text in a text-box read-only while allowing the rest to be edited

by

Here’s an attempt:

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;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />
<div id="output">
</div>

This disables keys other than the left and right arrows for the read-only part. It also disables the backspace key when just at the end of the read-only part.

From what I’ve read, this won’t work on IE <= 8.

Here it is in plain JavaScript (no JQuery):

function makeInitialTextReadOnly(input) {
  var readOnlyLength = input.value.length;
  field.addEventListener('keydown', function(event) {
    var which = event.which;
    if (((which == 8) && (input.selectionStart <= readOnlyLength)) ||
      ((which == 46) && (input.selectionStart < readOnlyLength))) {
      event.preventDefault();
    }
  });
  field.addEventListener('keypress', function(event) {
    var which = event.which;
    if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
      event.preventDefault();
    }
  });
}

makeInitialTextReadOnly(document.getElementById('field'));
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />

More Related Contents:

  1. how do i submit message to my email by html or js?
  2. JS hide function error
  3. Javascript counting all the characters from a HTML document
  4. Definitive way to trigger keypress events with jQuery
  5. Validation of file extension before uploading file
  6. How to set time delay in javascript
  7. Obtain form input fields using jQuery?
  8. How to use jQuery in chrome extension?
  9. Why can I not define functions in jQuery’s document.ready()?
  10. Access denied to jQuery script on IE
  11. Remove whitespace and line breaks between HTML elements using jQuery
  12. Event delegation vs direct binding when adding complex elements to a page
  13. Twig variable in external JS file
  14. Infinity Loop Slider Concepts
  15. Why does Jquery only affect the first div element? [duplicate]
  16. Get data from PHP array via AJAX and jQuery
  17. jQuery width() and height() return 0 for img element
  18. I’d like to understand the jQuery plugin syntax
  19. Insert dash after every 4th character in input
  20. Vertical Tabs with JQuery?
  21. How to get the key of a key/value JavaScript object
  22. why is jQuery click event firing multiple times
  23. Google Place API – No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access [duplicate]
  24. jquery how to select all the class elements start with “text-“?
  25. How to trigger key combo with jQuery
  26. How to compare two JSON have the same properties without order?
  27. How to detect line breaks in a text area input?
  28. Regular expression for only characters a-z, A-Z
  29. window.getSelection return html [duplicate]
  30. jQuery append and remove dynamic table row

Leave a Comment