スマートフォン向けサイトに設置するフォームを設置するときの小技まとめ

最近フォームをコーディングすることがとても多いのでまとめておこうと思います。

スマートフォンでデフォルトにあたっているスタイルをリセットする

webkit系のブラウザはフォームにいい感じのスタイルを当ててくれています。
いい感じではあるんですが、自分でスタイルをカスタムしたいときは結構邪魔になってきます。
行き過ぎた親切はときにうざったいものなのです。

こちらはcompassのreset等ではリセットされないので、

* {
  -webkit-appearance: none;
}

こんな感じでリセットしてしまいましょう。
ワイルドカードではなくつかうフォームのタグを明示的に指定したほうがより良いですね。

kimizuka.hatenablog.com

inputtypeに応じたキーボードを出す

割とたくさんあります。
emailにすれば@が入ったキーボードが、telにすれば番号を打ちやすいキーボードがでたりします。

デフォルト文言（プレースホルダーを複数行にする）

placeholder属性に複数行のテキストを入れたいときってありませんか？
なんとwebkit系のブラウザであれば可能なのです。

textarea::-webkit-input-placeholder:after {
    content: "\Aかわずとびこむ\Aみずのおと";
}

という感じで2行目以降は-webkit-input-placeholderのafterに設定しましょう。
\Aが改行となります。

DEMO

チェックボックスにチェックが入っているかどうかをJavaScriptで確認する

本物のチェックボックスを隠しつつ、オリジナルのチェックボックスを表示したい時など、チェックボックスの操作をしたくなる時は多々あります。
そんなときは、JavaScriptであれば、.checked 、jQueryであれば .prop をつかいましょう。

記事内にも書いてますが、querySelectorAllで:checkedを取得した際に静的なNodeListが返ってくる点には注意が必要です。

kimizuka.hatenablog.com

編集不可のinputをつくる

編集不可でPOSTする必要のある値はreadonly属性をつかいましょう。

<input type="text" readonly />

編集不可でPOSTもしなくていい値はdisabled属性をつかいましょう。

<input type="text" disabled />

input要素のフォーカスのあたる順番を入れ替える

iOSだと < >ボタンで、PCだとタブでフォームのフォーカスを切り替えることができますが、このときの順番はtabindex属性で指定できます。

<input type="text" placeholder="お" tabindex="1" />
<input type="text" placeholder="い" tabindex="7" />
<input type="text" placeholder="ま" tabindex="8" />
<input type="text" placeholder="う" tabindex="4" />
<input type="text" placeholder="は" tabindex="2" />
<input type="text" placeholder="ご" tabindex="5" />
<input type="text" placeholder="よ" tabindex="3" />
<input type="text" placeholder="す" tabindex="9" />
<input type="text" placeholder="ざ" tabindex="6" />

tabindexが小さい順にフォーカスが当たるので順番を入れ替えたいときに指定してみましょう。

DEMO

このデモでは「お」「は」「よ」「う」「ご」「ざ」「い」「ま」「す」の順にフォーカスがあたっていきます。

タブでフォーカスが当たらないフォームをつくる

tabindexの応用編です。
tabindexに負の値を入れることでタブや< >ボタンでフォーカスが当たらなくなります。

<p><input type="text" tabindex="1"></p>
<p><input type="text" tabindex="2"></p>
<p><input type="text" tabindex="3"></p>
<p><input type="text" tabindex="-1" placeholder="タブでは辿りつけない"></p>