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

范例

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

e、 g

---

如果不设置固定的宽度，最好不设置javascript，您可以将输入设置为显示所有占位符文本吗？

这只能通过javascript通过设置大小=占位符长度来完成：

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

以下是用于所有输入的代码：

---

如果有人想在jQuery中使用此代码，代码如下所示。此外，如果接受的答案中不存在

占位符

属性，则会出现错误，这在下面的jQuery示例中也会得到处理

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

---

我想到了一个解决办法：

• 使用与占位符相同的文本创建跨度元素
• 测量跨度元素的宽度
• 将输入设置为跨度元素的宽度
• 隐藏跨度元素。显示“无”将不起作用，请使用其他方法

---

我赞同上述一节评论中提出的阿夫纳·所罗门的解决方案

您需要一个

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>

这将通过赋予标签

高度：0

，并移除

可见性来隐藏标签。但是，
宽度保持不变。包含
输入的
div
，且标签与其最长子项的
宽度相匹配。如果随后将
输入设置为
宽度：100%
，则它将匹配已匹配占位符的父宽度


注意事项

这个想法不是很容易理解，这个解决方案也不是。您应该为输入包含一个标签，而不是依赖占位符本身作为标签。
不一定总是完全正确的宽度，这是有用且非常简洁的。谢谢。我在下面发布了一个答案，它使用jQuery运行，如果有人希望这样做，也可以避免抛出错误。幸运的是，结果在不同浏览器之间非常不一致。它仍然不一致吗？还有没有更好的方法来实现这一点？@BugWishperer。我认为所有现代浏览器都支持它，但“size”属性在定义上并不是固定长度。如果您在不同的浏览器（edge/chrome/ff）中打开我的JSFIDLE，您会注意到在最后一个单词后面或多或少有空格。这是因为“尺寸”的工作方式。另一种方法是用占位符相同字体的文本制作一个不可见的div，动态地测量它的宽度并将其设置为输入。我不理解你的警告，你说“这个想法不是很容易理解，这个解决方案也不是。”？对我来说，这似乎是一个很好的解决方案，可以方便地将HTML/CSS与JavaScript分开。@user3773048每个元素都需要有一个标签才能访问。为了符合WCAG.Genius，您不应该依赖占位符属性。我认为，只要你有一个标签，可访问性是好的。
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"

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