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サポートされているときにラベルを削除する、これはIMHOの問題ではありません）はplaceholder、属性として認識されているかどうかをチェックするJavaScriptを追加し、認識されている場合はラベルを削除することです。これに伴うリスクは、ブラウザが実際に属性をサポートせずに属性を認識する可能性があることです。最も安全な方法は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 に答える