Question

我正在创建一个终端命令提示符（用户可以在输入框上写入并按Enter键并从后端接收命令）。

我将模型的默认值传递给输入框的模板。此默认值是从后端获取的响应以及每次更改时（如不同的用户名以及“name $＆gt;”形式）但我想在$之前锁定它，因此用户无法返回并在此之前写入，这就是我尝试过的：

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> 任何的想法？跨度作为另一种解决方案？

Answer 1

为什么不像这样布置你的HTML：

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

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

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

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

您可以在此处看到一个粗略的示例：http://jsfiddle.net/5Nnqa/

Answer 2

尝试添加此内容：

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

后：

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

Answer 3

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

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

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

在javascript中使输入框的一部分无法编辑的问题

3 个答案: