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

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

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

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

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

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

Answer 1

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

 
abc  

选项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这样看起来很好看。

  Enter thingy: 
 ABC   

Answer 4

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

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

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

运行代码段尝试

 $('#Lab').before('' + $('#Lab').data('prefix') + ''); 

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