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

【问题标题】：How to move placeholder text along with the content of a textbox in HTML?如何在 HTML 中将占位符文本与文本框的内容一起移动？
【发布时间】：2012-12-09 14:10:05
【问题描述】：

假设这是我的文本框：

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

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

那么我怎样才能将占位符与文本一起移动，使其无法被删除，始终在文本之后？

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

【问题讨论】：

这看起来更像是与用户体验相关的问题，正如我的观点，你所想的可能有点出乎意料。带有某种图形标签的文本输入会更好
@dmi3y 嗯，UX 是什么意思？
这是用户体验的缩写，所以甚至有单独的相关站点ux.stackexchange.com

标签： javascript html css textbox placeholder

【解决方案1】：

这样做的一种方法是在输入元素上添加一个附加元素，并在用户键入时移动覆盖的元素。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：