javascript - 如何在 HTML 中将占位符文本与文本框的内容一起移动？

Question

假设这是我的文本框：

<input type="text" placeholder="%" />

并且用户应该在里面输入一个百分比，但没有%符号，只有数字（例如 67% 中的 67）。但我希望他们仍然记得这是一个文本框，您可以在其中插入百分比。

那么如何将占位符与文本一起移动，使其无法被删除，始终在文本之后？

而且我确实记得在某个地方也看到过它，除非我弄错了事实。

Answer 1

一种方法是让一个附加元素覆盖输入元素并在用户键入时移动覆盖的元素。

但是，我认为更好的 UX 体验是将元素作为附加组件附加到输入字段，如 twitter bootstrap 所示。请参阅“扩展表单控件”设置：

http://twitter.github.com/bootstrap/base-css.html#forms

Answer 2

您可以使用 javascript 模拟输入并更改实际输入的宽度。（诀窍是使用一些不可见的元素来捕捉所需的宽度）

使用 JQuery 的示例：http: //jsfiddle.net/Vu7hN/

$input.on('change keypress paste focus textInput input', function(){
    testWidth.text($input.val());
    $input.width(testWidth.width());
});