将不可编辑的文本附加到输入的末尾？

Posted 2023-03-05

【中文标题】将不可编辑的文本附加到输入的末尾？

【英文标题】：Append uneditable text to end of input?

【发布时间】：2017-10-13 08:31:41

【问题描述】：

html5 是否有任何属性可以将一些文本附加到输入值的末尾？例如，如果我有一个<input type="text">，有没有办法可以将/hrs 之类的内容附加到输入值的末尾？

我可以用 JS 轻松做到这一点，但它会包含在最终值中并且管理起来很麻烦。

任何帮助或建议都会很棒，谢谢！

【问题讨论】：

向我们展示如何使用 JS 来做到这一点，我们会尽量减少对您的麻烦。

为什么不希望一个常量后缀出现在编辑框之外？

@AndreySScherbakov 我想尝试一下所有内容都包含在输入中的东西，我可以轻松地添加一个引导插件，但我不想这样做。此外，通过我的错误验证，拥有一个插件并没有真正起作用。

@mehulmpt 只是类似于input.onchange => append string to val

@JoeScotto 会干扰原始光标位置。不会吗？

【参考方案1】：

编辑了这个答案：https://***.com/a/43964651/5674442

代码如下：

input 
  text-align: right;
  padding-right: 30px;


.placeholder 
    position: relative;
    display: inline-block;


.placeholder::after 
    position: absolute;
    right: 5px;
    top: 1px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.6;

<div class="placeholder" data-placeholder="/hrs">
    <input value="My text" />  
</div>

【讨论】：

接近我想要的，但我不希望它在打字时消失。

【参考方案2】：

好的。给你。

.placeholder 
    position: relative;
    display: inline-block;


.placeholder::after 
    position: absolute;
    right: 5px;
    top: 1px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.6;

<div class="placeholder" data-placeholder="/hrs">
    <input value="My text" />  
</div>

【讨论】：

这更接近，但我希望它与文本对齐，例如 33/hrs