如何防止用户删除文本输入中的前三个字符

选项1：将3个字符的前缀放在输入之外。从用户体验的角度来看，这是最好的。

<p>abc <input id="Lab" maxlength="10" name="LabWareId" type="text" class="valid"></p>

选项2：检查是否按退格键并相应地阻止删除。

$(document).on('keydown', function (e) {
  if (e.keyCode == 8 && $('#Lab').is(":focus") && $('#Lab').val().length < 4) {
      e.preventDefault();
  }
});

试试这个（这不是最好的解决方案，但它有效）：

Fiddle

$(document).ready(function() {
  $("#tb").on("keyup", function() {
    var value = $(this).val();
    $(this).val($(this).data("initial") + value.substring(3));
  });
});

请注意，如果我用鼠标突出显示前3个字符，并将它们移动到其他文本的末尾，它不会抱怨并允许这样做，这不是你想要的。

我可能会把生成的3个字符放在输入的左边，所以用户认为这些字符是不可编辑的。你可以这样使用引导程序使这个看起来有点不错。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<label for="basic-url">Enter thingy:</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">ABC</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" maxlength="7" placeholder="Enter 7 characters">
</div>

将3个字符放在可编辑区域之外是最简单/最好的方法。

然而，对于3个字符必须在输入标记中的情况，我的纯JavaScript方法也处理用户按下delete键或试图删除第一个字符的情况。如果用当前选择按下删除键意味着将保留不到4个字符，或者将删除开头的字符（删除选择或按退格键），则会抑制此用户操作。

该脚本将class＝＝"的所有输入标签添加到class＝"；有效的"；keydown事件处理程序调用函数keepLeadingChars（e），该函数首先确保按退格键在开头留下3个字符，然后确保删除所选内容在开头留下至少3个字符（或函数调用中指定的任何其他数字）。

// add keydown event to input tags
var inputs = document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i++) {
  var ClassAttr = inputs[i].getAttribute("class");
  if (ClassAttr=="valid") {
    inputs[i].addEventListener("keydown", function(e) { keepLeadingChars(e,3); } );
  }
}
function keepLeadingChars(e,count) {
  // if backspace key (8) pressed and ...
  if (e.keyCode==8) {
    // ... content length < 4 then prevent user action
    if (e.target.value.length<count+1) {
    e.preventDefault();
    }
    // ... cursor is within first characters at beginning then prevent user action
    var start = e.target.selectionStart;
    if (start<count+1) {
      e.preventDefault();
    }
  }
  // if delete key (46) pressed and ...
  if (e.keyCode==46) {
    var start = e.target.selectionStart;
    var end = e.target.selectionEnd;
    var selLength = end-start; // length of selection
    var totalLength = e.target.value.length;
    //console.log(totalLength-selLength);
    // ... remaining length < 3 then prevent user action
    if (totalLength-selLength<count) {
      e.preventDefault();
    }
    // ... selection is within first characters at beginning then prevent user action
    if (start<count) {
      e.preventDefault();
    }
  } 
}

intput 1: <input id="Lab1" maxlength="10" name="LabWareId" type="text" value="1234567" class="valid"><br />
intput 2: <input id="Lab2" maxlength="10" name="LabWareId" type="text" value="1234567" class="valid">

我将添加此解决方案作为另一种可能对某人有用的替代方案。

它使用jQuerybefore（）方法。它的工作原理与以前的CSS类似，但也使用输入元素。但是，您必须添加一些额外的样式，以使前缀看起来在输入中。

另请参阅：我可以在输入字段上使用：after伪元素吗？

运行代码片段以尝试

$('#Lab').before('<span class="prefix">' + $('#Lab').data('prefix') + '</span>');

form {
  background-color: lightgray;
  padding: 2em;
}
#Lab {
  border: 1px solid gray;
  border-left: none;
  width: 10em;
}
.prefix {
  color: dimgray;
  background-color: white;
  border: 1px solid gray;
  border-right: none;
  font-family: monospace;
  font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <input id="Lab" maxlength="10" name="LabWareId" type="text" data-prefix="123">
</form>

添加输入，使它们看起来像单个输入。

 <span>
    <input type="text" value="abc" readonly style="border-right: none;outline: none;width:25px"/>
  </span>
  <input type="text" style="border-left: none;outline: none;"/>