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

Question

我有一个文本输入,当页面加载时有三个动态生成的字符; 我想要的是当用户输入数据时,用户应该无法从输入中删除前三个字符.

文本输入总共可以包含10个字符,我们生成3个字符,用户输入7个字符.

目前,如果用户按退格键,他可以删除所有字符,但我不想让他们删除前三个字符.

在页面加载时,脚本在Lab文本输入中设置三个字符:

<input id="Lab" maxlength="10" name="LabWareId" type="text" value="" class="valid">

$('#Lab').keyup(function () {
  if ($(this).val().length == $(this).attr('maxlength'))
    $('#DateReceived').focus();
});

Answer 1

选项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();
  }
});

Answer 2

试试这个(这不是最好的解决方案,但它有效):

小提琴

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

请注意,如果我使用鼠标突出显示前3个字符并将其移动到其他文本的末尾,它将不会抱怨并允许它不是您想要的.

Answer 3

我可能会将3个生成的字符放在输入的左侧,因此用户不认为这些是可编辑的.你可以使用像这样的bootstrap使这看起来很好看.

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