javascript - 文本输入框：如何在键入的文本末尾显示占位符？

Question

所以...我的表单中有一个输入框列表...没有标签，只有占位符文本。

假设我有一个电子邮件的文本输入字段...

并且该文本的值是 ruby​​@rails.com

我想在该字符串之后显示：（电子邮件）...

（仅当输入模糊，输入聚焦时，标签不应该在那里）......我知道该怎么做......

唯一的问题是，我不知道如何计算输入框中实际文本的宽度，所以我可以在它旁边显示标签（当然是另一个绝对定位的元素）

有任何想法吗？

==================================================== ======== 编辑

所以，我在 html 标记中使用了类似的东西

<input type="text" name="my_field" value="" data-fixed-placeholder="(email)" placeholder="email">

然后我使用jQuery来检查数据固定占位符是否存在......并显示它......

所以像这样的东西（只是语义上......代码显然不是那样的）

$("[data-fixed-placeholder]").on("focus", function(e){
    //hide the fixed placeholder
}).on("blur", function(e){
    //show the palceholder
   //1. check if there is no text inside... then don't show it (the original placeholder is still visible)
   //2. if there is text, calculate how wide it is
   //3. wrap input box in div, make it position relative, append another div inside with the text from fixed-placeholder
   //4. position this text next to the actual text in the input box
});

希望这可以帮助您更好地帮助我。