[英]How to move placeholder text along with the content of a textbox in HTML?
Suppose this is my textbox: 假设这是我的文本框:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the %
sign, only the numbers (eg 67 in 67%). 并且用户应该在内部输入百分比,但是没有
%
符号,只输入数字(例如,67%中的67)。 But I want them to still remember that this is a text box in which you insert a percentage. 但我希望他们仍然记得这是一个插入百分比的文本框。
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text? 那么如何将占位符与文本一起移动,使其无法删除,始终在文本之后?
And I do remember seeing it somewhere too, unless I got my facts wrong. 我确实记得在某个地方看到它,除非我弄错了事实。
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types. 一种方法是使用一个额外的元素覆盖输入元素,并在用户输入时移动重叠的元素。
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. 但是,我认为更好的用户体验体验是将元素作为附加到输入字段的附加组件,如twitter bootstrap中所示。 See the "extending form controls" settings:
请参阅“扩展表单控件”设置:
http://twitter.github.com/bootstrap/base-css.html#forms http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. 您可以使用javascript模拟输入并更改实际输入的宽度。 (The trick is to use some invisible element to catch the needed width)
(诀窍是使用一些不可见的元素来捕获所需的宽度)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/ 使用JQuery的例子: http : //jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.