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

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

Fiddle

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

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

Answer 3

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

＆＃13;

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

＆＃13;

Answer 4

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

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

Answer 5

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

它使用jQuery before()方法。它与CSS before类似，但也与输入元素类似。但是，您必须添加一些额外的样式以使前缀看起来在输入内。

另见：Can I use the :after pseudo-element on an input field?

运行代码段以尝试

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

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

但是，对于必须在输入标记中包含3个字符的情况，我的纯正JavaScript方法也可以解决用户按下Delete键或尝试删除第一个字符的情况。如果使用当前选择项按Delete键意味着剩余少于4个字符或删除开头的字符（删除选择项或按Backspace键），则会抑制此用户操作。

脚本向class =“ =” valid“的所有输入标签添加了一个keydown事件处理程序，调用了函数keepLeadingChars（e），该函数首先确保按退格键会在开头保留3个字符，然后确保删除选择至少保留了开头三个字符（或函数调用中指定的任何其他数字）。

<!DOCTYPE html>
<html>
<body>

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

<script>
// 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();
    }
  } 
}
</script>

</body>
</html>

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

6 个答案: