Question

假设这是我的文本框：

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

用户应该输入一个百分比，但没有%符号，只有数字（例如67％的67％）。但我希望他们仍然记得这是一个插入百分比的文本框。

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

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

Answer 1

执行此操作的方法是使用一个额外的元素覆盖输入元素，并在用户键入时移动重叠的元素。

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

Answer 2

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

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