by shigemk2

当面は技術的なことしか書かない

オートフォーカス

HTML5

autofocus属性を利用して、ページのロードが完了した時点でフォーカスを
特定の入力フィールドへ移動する働きを実装したい。

一応こんな風に書けばいいのだけれど、

<form name="f">
  <input id="q" autofocus>
  <input type="submit" value="Go">
</form>

対応していないブラウザもあるので(IE)、
対応していないときはJavaScriptで拾うようにするといいでしょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <form name="f">
      <input id="q" autofocus>
      <script>
      	if(!("autofocus" in document.createElement("input"))) {
      	  document.getElementById("q").focus();
      	}
      </script>
      <input type="submit" value="Go">
    </form>
    <form>
      <input name="q" placeholder="履歴とブックマークを検索">
      <input type="submit" value="検索">
    </form>
    <form>
      <input name="q" placeholder="(」・ω・)」うー！(／・ω・)／にゃー！">
      <input type="submit" value="混沌">
    </form>
  </body>
</html>

入門 HTML5

入門 HTML5