如何在文本框末尾连接一些只读文本？答案

【问题标题】：How to concatenate some read-only text at the end of the text box?如何在文本框末尾连接一些只读文本？
【发布时间】：2017-07-05 08:13:08
【问题描述】：

如何将文本框中的某些文本设置为只读，同时允许编辑其余文本。我正在尝试制作一个允许用户输入文本的文本框，然后在文本框的末尾有一些只读文本（不可编辑）。我怎样才能在 Javascript/jquery 中做到这一点？

例如输入字段：

送货地址

输入您的住宅或公寓号码，ABC 区，XYZ 镇

在上面，例如，要求用户提供家庭或公寓号码，ABC 区，XYZ 镇 是预定义的值（已在某个阶段提供）。如果我将它们一分为二，大多数用户会将其完整地址放在文本字段中，从而导致数据重复。我需要避免这种重复。

提前感谢您的帮助。

【问题讨论】：

这在你描述的方式中是不可能的。文本框的值是否可编辑，不能部分混合。一种解决方案是设置两个框，一个可供用户编辑，另一个为只读，具有您需要的值。

标签： javascript jquery textfield input-field

【解决方案1】：

对于这种情况，您没有可能的解决方案。

为了更好的用户体验，我建议您将可编辑的文本放在文本框中，将不可编辑的单词放在标签中。将有助于不让用户感到困惑。

【讨论】：

【解决方案2】：

我会按照以下方式进行。

我会创建两个文本框：
- text_box_1 - ABC 区域 和
- text_box_2 - XYZ Town //但不可见 (style="display:hidden")
text_box_2 的内容通过使用 jQuery 我将填充一个绝对元素，其位置高于 text_box_1 它将看起来在 text_box_1 内部，但它不会影响可编辑的内容。

如果有道理，你可以按照这种方法。

【讨论】：