javascript - 禁用输入框的编辑部分

Question

我知道我可以使用禁用/锁定输入框的一部分

<input type="text" disabled="disabled"/>

或者

<input type="text" readonly="readonly"/>

但我想拥有

<input type="text" value="[[inputbox|edithere]]"/>

用户只能编辑的地方edithere

我试图用谷歌搜索，但我能找到的唯一相关内容是如何完全禁用输入框或禁用某些键。

我不知道输入框id或有多少（通过 php onload 动态创建），但我知道它们将始终是一个管道和两个 ]] 预订我要编辑的值。

编辑

score 5 · Accepted Answer

您不能通过仅操作属性的股票输入来做到这一点。

但是，您可以使用 css 和一些额外的标记来模拟它：

<div class="wrapper">
    <div class="static text">static text</div>
    <input class="text" type="text" />
</div>

将“静态文本” div 放置在输入的顶部，并向输入文本添加左填充。

score 1 · Accepted Answer

不可能。使用标签来包装输入，并将不可编辑的部分放在输入之前或之后，并将标签设置为看起来像输入，并设置输入以匹配该样式。

如果您需要表单来发送所有数据，请在输入后创建一个隐藏输入，并在更改主输入的值时使用 JavaScript 更新它的值（到静态和输入的文本连接）。这样在发送表单时，将使用稍后隐藏的具有相同名称的输入。

score 0 · Accepted Answer

虽然这不是完全不可能做到的，但这将是非常困难的，尝试做这样的事情是一种非常糟糕的做法，至少对于您的用例而言。

您应该在输入框中不受限制地获取用户输入，如果您想添加方括号等，您可以稍后使用 Javascript 或您的服务端语言添加它们。

或者，如果您真的希望在文本框中显示字符，您可以使用 claustrofob 的解决方案并弄乱 CSS。

3 回答 3