Question

我有一个文本字段，需要以两个字母的单词作为提示开头。这两个字是必需的，用户不应该删除它或在它之前添加文本。

我尝试使用substr()检查前两个字符，但这看起来很笨拙

if ($("#myinput").val().substr(0,2) != "ab") {
// alter value
}

我遇到的问题是人们可以先删除第一个字符，先删除第二个字符，或突出显示文本并同时删除它们。我想过要检查一下有人可能会改变这个文字的任何可能的方法，但它似乎很冗长，而且必须有更好的方法。

是否有一种很好的方法可以使这段文字“不可取消”＃34;或者我只是需要检查有人可能改变初始文本的所有可能方式？

由于

Answer 1

这是一个不需要jQuery的快速示例。

它基本上为input事件添加了一个事件监听器，并最初设置了第一个字符。此外，它还可以防止删除字符，使其“不可删除”，并强制它们保持不变。

var inputElement = document.getElementById('enfore-rules');
inputElement.addEventListener('input', function (e) {
    var element = e.target,
        firstCharacters = 'ab';
    
    if (element.value.length < firstCharacters.length) {
        element.value = firstCharacters;
    } else {
        element.value = element.value.replace(/^.{2}/, firstCharacters);
    }
});

<input text="text" id="enfore-rules" value="ab"/>

或者，您也可以在input元素之外插入两个字符，如下所示：

.input-masked {
  display: inline-block;
  position: relative;
  font-family: monospace;
  line-height: 1.4em;
  font-size: 16px;
}
.input-masked:before {
  position: absolute;
  content: 'ab';
  left: 4px;
  box-sizing: border-box;
  line-height: 1.4em;
  border-top: 2px solid transparent;
}
.input-masked input {
  margin: 0;
  padding: 0 0 0 1.4em;
  font-family: inherit;
  line-height: inherit;
  font-size: inherit;
  box-sizing: border-box;
  border-width: 2px;
}

<div class="input-masked">
  <input type="text" />
</div>

Answer 2

以下是验证输入框以“ab”开头的示例。我建议你在文本框之前将ab拆分成一个范围，并将“ab”连接到用户输入文本框的任何内容而不是验证。

https://jsfiddle.net/tegk10ex/

 X AT %MW3 : DINT;
 Y AT %MD4.1 : DINT;
 Z AT %MD4.1 : REAL;

确保文本字段以特定值开头：jQuery

2 个答案: