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

Posted 2023-04-18

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

【英文标题】：Add non-editable text after cursor in input box

【发布时间】：2014-11-02 03:46:14

【问题描述】：

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

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

输入字段：[editabletextherecursorherenon-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; 进行风格化。我还想将不可编辑的文本风格化为不同的颜色。任何帮助将非常感激。谢谢。

【问题讨论】：

您不能将输入字段一分为二。不确定您要对此做什么。

【参考方案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

【讨论】：

这看起来不错。一个问题：有没有办法让光标在输入的文本之后？即在“输入”之后？

当插入符号位于用户输入文本的末尾时 - 它停止闪烁 - 你如何保持闪烁的插入符号？

这表现得像一个文本区域而不像一个输入，如果我按回车，它就会变高

【参考方案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

【参考方案3】：

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

【讨论】：

很公平。我仍然有点不确定 cmets 和答案之间的界限。似乎这可以解决 OP 的问题。