0

我正在用 HTML 制作一个注册页面。我正在使用placeholder输入，但我知道一些主要浏览器（IE <9、Firefox <3.7、Chrome/Safari <4.0）不支持此 HTML5 功能。

我最喜欢的回退方式placeholder是这段代码，它不需要任何 Modernizr 或其他 JavaScript：

<audio>Username: </audio>
<!-- Fallback; won't be displayed by HTML5 browsers -->
<input type="text" placeholder="Username">
<!-- The placeholder will just be ignored by non-HTML5 browsers-->

问题是这个注册表单在一个表格中，并且后备不起作用 - 它也显示了后备文本：

<table>
<tr>
    <audio>
        <td>
            Username:
        </td>
    </audio>
    <td>
        <input type="text" name="Username" placeholder="Username">
    </td>
</tr>
</table>

那么，我该怎么做回退呢？我知道 Modernizr 和其他 JS 库，但由于我的服务器上传速度低并且作为一般准则，我更愿意避免使用它们。<td><audio>Fallback</audio></td>此外，由于图形问题（添加水平空白，也可以设置 td 样式可能会出现问题），我没有考虑使用。

4

1 回答 1

2

如果您有任何输入字段的显式标签，则不需要任何后备，建议使用此标签以提高可访问性和可用性。

audio当且仅当它支持该placeholder属性时，依赖浏览器支持该元素的假设是相当奇怪的。例如，IE 9 支持audio但不支持placeholder.

一种更合理的方法（在支持时删除标签placeholder，恕我直言，这不是问题）是添加一段 JavaScript 来检查是否placeholder被识别为属性，如果是则删除标签。这样做的风险是浏览器可能会识别该属性而不实际支持它。最安全的方法似乎是input在 JavaScript 中创建一个元素并检查该对象是否具有该placeholder属性：

<table>
<tr id="row">
        <td id="label">
            <label for="username">Username:</label>
        </td>
    <td>
        <input type="text" name="Username" placeholder="Username" id="username">
    </td>
</tr>
</table>
<script>
if(!('placeholder' in document.createElement('input'))) {
  document.getElementById('row').removeChild(document.getElementById('label'));
}
</script>
于 2012-12-16T13:16:48.247 回答