在输入框中的光标后添加不可编辑的文本

Question

我正在尝试在文本字段/输入框中的光标后添加不可编辑的文本，以实现以下目的：

1) 光标前的文字是可编辑的 2) 光标后的文本不可编辑，随着左侧文本的添加/删除而向右/向左移动

输入字段：[editabletexthere{cursorhere}non-editabletexthere]

到目前为止，这是我的输入框的代码：

<input id="edit_input" type="text" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus onfocus="this.value = this.value;" value="editabletext" style="width:100%;"></input>

我觉得输入中的值应该放在一个跨度内，而第二个跨度只需使用 contenteditable=false; 进行风格化。我还想将不可编辑的文本风格化为不同的颜色。任何帮助将非常感激。谢谢。

Answer 1

这可能不是最好的解决方案，它有点像 hack，但效果很好。 我们的想法是创建一个看起来像输入框的 div，其中包含 2 个跨度，并让其中一个可编辑。

div {
    border: 1px solid #999;
    padding: 5px;
    width: 100%;
}

span {
    width: auto;
    outline: 0;
}

span.trailing {
    color: grey;
}

<div>
    <span contenteditable="true" id="edit_input_fake">Input</span>
    <span class="trailing">Trailing text</span>
  </div>

您可以创建一个<input type="hidden">，如果需要，您可以在事件 keydown/change 上复制第一个跨度（可能也是第二个跨度）的内容。

JSFiddle 可在此处获取：http://jsfiddle.net/c6f7ommh/1

Answer 2

JSFiddle - DEMO

你可以这样做：

HTML：

<input id="edit_input" type="text" autocapitalize="off" autocorrect="off" spellcheck="false" autofocus onfocus="this.value = this.value;" value="editabletext" style="width:100%;"></input>
<p>SOME TEXT</p>

CSS：

input {
    width: 100%;
    float:left;
    font-size: 16px;
    padding: 0px 120px 0px 0px;
    box-sizing:border-box;
}
p {
    margin:0px 0px 0px -100px;
    float:left;
    padding-top: 5px;
}

[已编辑]

如果你想cursor: default; 和user-select: none; - DEMO

Answer 3

如果您试图告知用户某些文本将被附加到他们输入的任何内容中，那么在文本框后面添加一个带有不可编辑部分的标签就足够了。然后，您的服务器代码可以并行地将不可编辑部分附加到提交的文本中，因为我假设它是一个常量。