如何只允许文本框中的某些文本为只读,同时允许编辑其余文本

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