Question

我正在用HTML制作注册页面。我正在使用placeholder作为输入，但我知道某些主流浏览器（IE＆lt; 9，Firefox＆lt; 3.7，Chrome / Safari＆lt; 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可能会产生问题）。

Answer 1

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

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

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

如何在桌子上倒退？

1 个答案: