読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

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



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

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>
DEMO



カスタムを諦めて透明にするのも1つの手

どうしてもうまくいかない時の最終手段です。
フォームのパーツを透明にして、自作したUIの上に置いてしまうという荒業で解決したほうが早い場面もあります。
個人的にはtypeがfileのinput要素なんかはこの方法でカスタムすることが多いです。

kimizuka.hatenablog.com



「なんかAndroidでフォームに文字を入力するときにページがガタガタするんですけど」と言われた際

試しに、

backface-visibility: hidden;

を当ててみましょう。
Android2.3.Xでよく再現します。


kimizuka.hatenablog.com



「iOSでもテキストボックス内でリターンを押した際にサブミットしたいんですけどできますか?」と聞かれた際

できます。と答えましょう。

kimizuka.hatenablog.com



【おまけ】

ユーザーがフォームに入力中の際はページを遷移する前にダイアログを出す

こちらはスマートフォン向けのサイトでは実装できないのですが、PC版のサイトには入れておいたほうが良いでしょう。
長いフォームを入力中に間違えてブラウザバックしてしまった際にデータが全部消える的な悲劇を防ぐことができます。

kimizuka.hatenablog.com