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

Posted 2023-03-05

【中文标题】如何设置输入宽度以匹配占位符文本宽度

【英文标题】：How to set an input width to match the placeholder text width

【发布时间】：2013-06-22 13:44:17

【问题描述】：

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

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

例如

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

不设置固定宽度，最好不设置javascript，能否设置输入显示所有占位符文本？

【参考方案1】：

这只能通过 javascript 通过设置 size = placeholder length 来完成：

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

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

【讨论】：

不一定总是完全正确的宽度，有用且非常简洁。谢谢。

我在下面发布了一个使用 jQuery 运行的答案，如果有人想要这样的话，也可以避免抛出错误

不幸的是，跨浏览器的结果非常不一致。

还是不一致吗？还有没有更好的方法来实现这一点？

@BugWishperer 。我认为所有现代浏览器都支持它，但根据定义，“大小”属性不是固定长度。如果您在不同的浏览器（edge/chrome/ff）中打开我的 jsfiddle，您会注意到最后一个单词后或多或少有空格。那是因为“大小”的工作方式。另一种方法是使用占位符的相同字体的文本制作一个不可见的 div，动态获取它的宽度并将其设置为输入。

【参考方案2】：

以防万一有人想将它与 jQuery 一起使用，该代码将在下面。此外，如果接受的答案中不存在 placeholder 属性，您将收到错误，下面的 jQuery 示例也解决了这一问题。

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

【参考方案3】：

我采用了 Avner Solomon 的解决方案，正如上述部分的 cmets 中所建议的那样。

您需要一个 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>

假设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 仍然存在。包含input 和标签的div 与其最长的孩子的width 匹配。如果您随后将input 设置为width: 100%，它将匹配已匹配占位符的父宽度。

See this fiddle.

注意事项

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

【讨论】：

我不明白你的警告，你说“这个想法不是很容易理解，这个解决方案也不是。”？对我来说似乎是一个很好的解决方案，并且可以方便地将 html/CSS 与 JavaScript 分开。

@user3773048 每个元素都需要有一个标签才能被访问。您不应该依赖占位符属性来符合 WCAG。

天才。我认为只要你也有标签，可访问性就很好。

【参考方案4】：

我想到的解决方法：

使用与占位符相同的文本创建一个 span 元素。 测量跨度元素的宽度。 将输入设置为 span 元素的宽度。 隐藏跨度元素。 display none 不行，用其他方法吧。

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"