0

我正在制作一个终端命令提示符（用户可以在输入框上书写并按 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); 
    } 
});

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

那是我的输入框：有<input type="text" id="textInput" name="" style="background: #222; autofocus> 什么想法吗？用跨度作为另一种解决方案？

4

3 回答 3

1

为什么不这样布局你的 HTML：

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

然后你可以像这样修改你的代码：

var textString = this.model.get("name") + " $> ";
$('#prefix').text(textString);

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

你可以在这里看到一个粗略的例子：http: //jsfiddle.net/5Nnqa/

于 2013-09-17T09:57:35.267 回答
0

尝试添加这个：

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

后：

$("#textInput").val(textValue);
于 2013-09-17T09:41:18.593 回答
0

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

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

您将使用一些css进行调整。

于 2013-09-17T09:51:45.250 回答