javascript - 如何仅将文本框中的某些文本设置为只读，同时允许编辑其余文本

Question

我正在尝试使用 Javascript 制作一个文本框，该文本框在文本框的开头包含一些只读文本，然后允许在只读文本之后进行编辑。我如何在 Javascript/jquery 中执行此操作？

Answer 1

这是一个尝试:

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>

这会禁用只读部分的左箭头和右箭头以外的键。它还会在只读部分末尾禁用退格键。

据我所知，这不适用于 IE <= 8。

---

这里是纯 JavaScript(没有 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" />