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 回答