Html 如何设置输入宽度以匹配占位符文本宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17302794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set an input width to match the placeholder text width
提问by Dan Eastwell
Example http://dabblet.com/gist/5859946
示例http://dabblet.com/gist/5859946
If you have a long placeholder, the input by default does not display wide enough to show all the placeholder text.
如果您有一个长占位符，默认情况下输入不会显示足够宽以显示所有占位符文本。
e.g.
例如
<input placeholder="Please enter your name, address and shoe size">
Without setting a fixed width, and preferably no javascript, can you set the input to show all the placeholder text?
如果没有设置固定宽度，最好没有 javascript，你能设置输入以显示所有占位符文本吗？
采纳答案by Avner Solomon
This can be done only via javascript by setting the size = placeholder length:
这只能通过 javascript 设置大小 = 占位符长度来完成：
input.setAttribute('size',input.getAttribute('placeholder').length);
Here is a code that dose that for all the inputs: http://jsfiddle.net/KU5kN/
这是一个用于所有输入的代码：http: //jsfiddle.net/KU5kN/
回答by Brian Leishman
Just in case someone wants to use this with jQuery, that code would be below. Also, if the placeholderattribute doesn't exist in the accepted answer, you'll get errors, which is taken care of as well in the jQuery example below.
以防万一有人想在 jQuery 中使用它，该代码将在下面。此外，如果placeholder接受的答案中不存在该属性，您将收到错误，这在下面的 jQuery 示例中也得到了处理。
$("input[placeholder]").each(function () {
$(this).attr('size', $(this).attr('placeholder').length);
});
回答by AdamMcquiff
I went with Avner Solomon's solution, as proposed in the comments of one of the above sections.
我采用了 Avner Solomon 的解决方案，正如上述部分之一的评论中所建议的那样。
You need a divelement wrapping an inputand another divelement that contains your label:
你需要一个div元素包装的input，另一个div包含您的标签元素：
<div class="input-container">
<!-- this element is hidden from display and screen readers. -->
<div class="input-hidden-label"
aria-hidden="true">
Your placeholder text
</div>
<input class="input"
type="text"
placeholder="Your placeholder text"/>
</div>
Assuming the font styles for the input-hidden-labeland the inputare the same, you will see a line of text alongside the input. The text will be the same length as the input, give or take a few pixels.
假设 theinput-hidden-label和 the的字体样式input相同，您将在输入旁边看到一行文本。文本将与输入的长度相同，给或取几个像素。
You can then apply these styles:
然后您可以应用这些样式：
.input-container {
display: inline-block;
margin-bottom: 2em;
}
.input {
display: inline;
width: 100%;
font-size: 16px;
font-family: Times;
}
.input-hidden-label {
height: 0;
visibility: hidden;
}
This hides the label by giving it height: 0, and removing visibility. But, the widthremains. The divthat contains the inputand the label matches the widthof its longest child. If you then set the inputto width: 100%, it will match the parent width, which already matches the placeholder.
这通过给它height: 0并删除标签来隐藏标签visibility。但是，width遗迹。在div包含input和标签相匹配的width最长孩子。如果然后将 设置input为width: 100%，它将匹配父宽度，该宽度已经匹配占位符。
Caveats
注意事项
This idea is not very accessible, nor is this solution. You should include a label for the input, and not rely on the placeholder itself as a label.
这个想法不是很容易理解，这个解决方案也不是。您应该为输入包含一个标签，而不是依赖占位符本身作为标签。
回答by Timar Ivo Batis
A workaround i thought of:
我想到的一个解决方法：
- Make a span element with the same text as placeholder.
- Measure width of the span element.
- Set input to the width of the span element.
- hide span element. display none will not work, use other method.
- 使用与占位符相同的文本制作一个 span 元素。
- 测量跨度元素的宽度。
- 将输入设置为 span 元素的宽度。
- 隐藏跨度元素。display none 不起作用，使用其他方法。
http://jsfiddle.net/Timar/cwLp3rbo/
http://jsfiddle.net/Timar/cwLp3rbo/
var input = document.getElementById('input-1');
// measure width of same text as placeholder
var placeholder = document.getElementById('input-1-placeholder');
input.style.width = placeholder.offsetWidth + "px"
