TEXT INPUT BOX：如何在键入文本的末尾显示占位符？

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

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