如何使输入字段中的某些文本不可编辑？答案

【问题标题】：How to make some piece of text inside a input field non editable?如何使输入字段中的某些文本不可编辑？
【发布时间】：2014-04-18 23:40:28
【问题描述】：

我有一个要求，我有一个 maxLength 4 的输入字段。在这 4 个字符中，前 2 个字符将是“FR”。剩余的 2 个字符将由用户插入。所以，在页面加载期间，我调用了Jquery 函数并像这样设置值“FR”

  $('.testData').val("FR");

**现在，当用户编辑剩下的两个字符时，他将不能编辑文本“FR”。他也不能删除这个文本“FR” "

通过设置

<input type="text" readonly>

它将使整个输入字段不可编辑，我不希望这样，我只想限制前 2 个字符的编辑。

谁能解决这个问题？？？

【问题讨论】：

这似乎会导致可用性问题...您可以为此目的使用两个单独的文本框吗？否则用户将不知道什么是可编辑的，什么是不可编辑的。
这个问题似乎离题了，因为它没有显示出解决问题的实质性尝试。
为什么不只将 FR 作为标签，甚至不在输入字段内？
您可以将onkeyup 事件附加到该字段并检查该事件中该字段的值。如果字符串的前两个字符不是“FR”，则在当前字符串前面加上“FR”，或者用“FR”替换当前字符串的前两个字符（您可以选择要实现的逻辑）。跨度>
不，我不能使用 FR 作为我项目要求的标签。实际上，输入字段代表一个国家的 IBAN 号码。@Brian

标签： jquery html

【解决方案1】：

一个 hacky 解决方案，但有点用 JS 来解决问题。

<input id="myId" type="text" value="AZ"></input>

$("#myId").keydown(function(event){
    console.log(this.selectionStart);
    console.log(event);
    if(event.keyCode == 8){
        this.selectionStart--;
    }
    if(this.selectionStart < 2){
        this.selectionStart = 2;
        console.log(this.selectionStart);
        event.preventDefault();
    }
});

$("#myId").keyup(function(event){
    console.log(this.selectionStart);
    if(this.selectionStart < 2){
        this.selectionStart = 2;
        console.log(this.selectionStart);
        event.preventDefault();
    }
});

小提琴here！

【讨论】：

我需要在我的项目中为您上面提到的代码添加任何 jquery 库吗？？？bcz 它在我的项目中不起作用。@Izaaz Yunus
是的，您需要添加 jquery 库。您可以使用找到的here