【问题标题】:Why doesn't HTML select box support the placeholder attribute?为什么 HTML 选择框不支持占位符属性?
【发布时间】:2015-12-12 13:12:41
【问题描述】:

我正在使用 html 选择框,发现它们目前 don't 支持占位符属性,但我不完全明白为什么会这样。

我只是想了解造成这种情况的原因是什么?感谢您提供任何见解。

【问题讨论】:

  • 您希望它如何工作?

标签: html placeholder


【解决方案1】:

这可能是因为传统的占位符文本在选择元素中没有意义,因为您只有一组预定义的选项可供选择。您无法像在许多桌面应用程序中使用可编辑组合框那样编辑选择元素中的文本,但这仅仅是因为 HTML 根本不提供开箱即用的可编辑选择元素。

select 元素通过 HTML5 规范称为 placeholder label option 的方式实现“占位符”,描述如下:

如果select元素指定了required属性,没有指定multiple属性,并且显示大小为1;如果select 元素的选项列表(如果有)中的第一个option 元素的值为空字符串,并且option 元素的父节点是select 元素(而不是optgroup元素),那么option 就是select 元素的占位符标签选项。

它给出了以下示例:

代码示例:

以下示例显示了如何使用select 元素为用户提供一组选项,用户可以从中选择一个选项。已预先选择默认选项。

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

当没有默认选项时,可以使用占位符代替:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

这个成语其实自古就有。

【讨论】:

  • 好的,我已经接受了非常完整的答案。一个简单的问题是仍然无法在选择框中居中文本吗?我读了3年前的一篇文章,说这是不可能的。 stackoverflow.com/questions/10813528/…
【解决方案2】:

当用户没有输入任何值时,会出现占位符文本。 选择框,在这种情况下,当用户没有输入值时,将出现第一个选项。所以我们可以使用 1st &lt;option&gt; 作为占位符文本并且不需要占位符属性。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-20
    • 2012-12-27
    • 2011-08-29
    • 2013-08-14
    • 1970-01-01
    • 2014-05-16
    相关资源
    最近更新 更多