在javascript中使部分输入框不可编辑的问题

我正在做一个终端命令提示符（用户可以在输入框中写入并按enter键，然后从后端接收命令）

我正在将输入框的默认值从模型传递到模板。此默认值是从后端获取的响应，每次它更改时（如不同的用户名，其形式为“name$>”），但我希望将其锁定在$之前，以便用户无法返回并在此之前写入，这就是我尝试的：

var textValue = this.model.get("name") + " $> ";
var textString = String(textValue); 
var textStringLength = textString.length;
$("#textInput").on("change keyup keypress keydown", function(evt) {     
    if($("#textInput").val().length < textStringLength) {
       $("#textInput").val(textValue); 
    } 
}); 

var textValue=this.model.get（“name”）+“$>”；
var textString=字符串（textValue）；
var textStringLength=textString.length；
$（“#textInput”）。在（“更改键向上键按下键向下键”，函数（evt）{
if（$（“#textInput”）.val（）.length

但我仍然可以编辑它！令人惊讶的是，它只适用于退格（这意味着我不能通过退格删除它），但如果我使用箭头键或将鼠标光标放在两者之间，我仍然可以编辑！有什么想法吗

这是我的输入框：

尝试添加以下内容：

$("#textInput").attr("disabled",true); 

之后：

$("#textInput").val(textValue); 

如果您使用下面的2文本框，那么我认为您的问题将得到解决。我已经应用了这个逻辑来解决我自己类似的问题

<input type="text" id="textInput1" size="1" name="" style="border-right:0px;" value="$" readonly="readonly">
<input type="text" id="textInput" name="">



您将不得不使用一些css进行调整。
为什么不这样布局您的HTML：

<span id="prefix"></span><input type="text" id="textInput" />

现在，您可以在
>
之后编辑命令，但提示不可编辑

您可以在这里看到一个粗略的示例：
为什么不在输入框前面放一个不可编辑的HTML元素（例如
），并用
名称$>
字符串更新该元素的内容？如果我使用span，整个输入框将不可编辑。这就是我的输入框：请看下面我的答案。我认为通过JQuery只禁用一半的文本框是不可能的。。为什么不使用两个单独的文本框和一些css，使它们看起来像一个文本框。我想你忘了更新小提琴，因为它不工作。@sanki-如果你等两秒钟，文本框前面会出现
fred$>
提示。我说这是一个粗糙的例子：-）实际上只是一个概念的证明。
var textString = this.model.get("name") + " $> ";
$('#prefix').text(textString);