如何设置输入宽度以匹配占位符文本宽度

Question

例子http://dabblet.com/gist/5859946

如果您有一个长占位符,默认情况下输入的宽度不足以显示所有占位符文本.

例如

<input placeholder="Please enter your name, address and shoe size">

如果没有设置固定宽度,最好没有javascript,您可以设置输入以显示所有占位符文本吗？

Answer 1

这可以通过javascript设置size =占位符长度来完成:

input.setAttribute('size',input.getAttribute('placeholder').length);

这是一个代码,用于所有输入:http: //jsfiddle.net/KU5kN/

Answer 2

为了防止有人想在jQuery中使用它,该代码将在下面.此外,如果placeholder接受的答案中不存在该属性,您将收到错误,这也将在下面的jQuery示例中得到解决.

$("input[placeholder]").each(function () {
        $(this).attr('size', $(this).attr('placeholder').length);
    });

Answer 3

我采用了 Avner Solomon 的解决方案，如上述章节之一的评论中所提议的。

您需要一个div包装 an 的元素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>

假设 和input-hidden-label的字体input样式相同，您将在输入旁边看到一行文本。文本的长度将与输入的长度相同，增加或减少几个像素。

然后您可以应用这些样式：

.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;
}

height: 0这通过提供和删除标签来隐藏标签visibility。但是，width遗迹。包含且div标签与其最长子项的input相匹配。width如果您随后将 设为input，width: 100%它将匹配父宽度，该宽度已经与占位符匹配。

看看这个小提琴。

注意事项

这个想法不太容易理解，这个解决方案也不是很容易理解。您应该为输入添加标签，而不是依赖占位符本身作为标签。