Question

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

1）光标前的文本是可编辑的 2）光标后的文本不可编辑，并在添加/删除左侧文本时向右/向左移动

INPUT FIELD：[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

这可能不是最好的解决方案，它有点像黑客，但它运行正常。我们的想法是创建一个看起来像一个内部2跨度的输入框的div，并使其中一个可编辑。

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>

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

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;
}

<强> [EDITED]

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

Answer 3

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

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

3 个答案:

JSFiddle - DEMO