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

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

这可能不是最好的解决方案，虽然有点破解，但效果很好。这个想法是创建一个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