主页 / 问题 / 1010544
Accepted
Бармалей
Asked:2020-08-06 05:28:12 +0000 UTC2020-08-06 05:28:12 +0000 UTC

如何防止删除输入中的第一个字符？

  • 772

有一个输入字段，其中三个字符的初始值是通过 JavaScript 自动写入的。在这样一个脚本的帮助下，我禁止删除这三个字符：

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

但是，如果您在输入字段中至少写了第四个字符，然后按Ctrl+A，或者选择整个文本，或者将光标移到开头并按Backspace，则删除将起作用。

如何完全禁用删除前三个字符？

javascript

3 个回答

  1. 没有脚本的选项。

    在输入的顶部，我们放置一个包含不应删除的文本的跨度。

    .control {
  position: relative;
}

input {
  padding-left: 23px;
}

.prefix {
  position: absolute;
  top: 1px;
  left: 5px;
}
    <div class="control">
  <input type="text">
  <span class="prefix">bla</span>
</div>

    • 3
  2. Best Answer

    您不能在任何地方禁止任何人）并且在发送时 - 从两个元素中收集数字。

    #first, #last {
  background-color: white;
  border: 1px solid #aaa;
  font-size: 18px;
  line-height: 22px;
  font-family: 'Verdana';
  padding: 5px;
  box-sizing: blorder-box;
  display: inline;
  outline: none;
}
#first {  
  border-right: none;
}
#last {  
  border-left: none;
}
    <span id="first" onclick="this.nextElementSibling.focus();">+8 123</span><input id="last">

    关于脚本，如果你完全跟踪退格 - 理论上，你可以选择所有内容并 CTRL + V。没有人会这样做，但仍然......你可以让他们正常输入数字，每次输入后，替换前 4 个字符和必要的字符：

    // $('#bubu').on('input', function(){...});

document.getElementById('bubu').addEventListener('input', function(){
  this.value = "+123" + this.value.slice(4);
});
    #bubu { font-size: 50px; }
    <input id="bubu" value="+123">

    • 2 
  3. $('#input-new').on("keydown", function(e) {
    // Запрет выделения ctrl + a
  if (e.ctrlKey && e.keyCode === 65) return false;

  // Запрет выделения клавишами
  if (e.shiftKey && ((e.keyCode === 37 && this.selectionStart < 4) || (e.keyCode === 39 && this.selectionStart < 3)
  || e.keyCode === 38 || e.keyCode === 40)) 
  return false;

  // Запрет удаления через backspace и del
  if (e.keyCode == 46 && this.selectionStart < 3)
    return false;
  else if (e.keyCode == 8 && this.selectionStart < 4)
    return false;
});

    试试这个选项。我没有挂起一个全局事件，而是挂起一个特定字段上的事件，在本例中是 #input-new。不过，该解决方案可能不适用于旧版浏览器。但似乎代码禁止删除前 3 个字符，即使我们将光标移动到任何地方。添加了对DEL键的更多处理，因为我们也可以使用它删除文本。也禁用通过键的选择。还是可以用鼠标选择真相，问题依旧。当然，您可以尝试一般禁用文本选择，然后问题就会解决。诚然，解决方案会更长，使用这样的领域可能不是很方便。

    • 1

相关问题