スマートフォン上での inputタグとキーボードの関係

よくある疑問

スマホで入力フォームタップしたときに立ち上がるキーボードって制御できないの？

結論としては制御はできません。但し、type属性に対応した初期キーボードの設定はOS側？でされているので、そちらでひっかけることはできるっぽい。

スマートフォン上での inputタグとキーボードの関係

正確には文字列を打ち込むタイプのinput

具体的には

input type="text"

input type="search"

input type="number"

input type="tel"

input type="email"

input type="password"

input type="url"

だいたいこんな感じ。他にもdatetimeなどもあるけど、端末やOSによってはテキストでない入力方法もあったりするので却下。

さてこの状態で、実際にスマートフォンからタップしてもらえるとわかるが、
各inputタップ後最初に起動するのは、

text        → デフォルト
search     → デフォルト
number    → 数字入力
tel          → 電話番号入力
email       → 英字
password → 英字
url          → デフォルト

となるかと。 要するに、だいたいデフォルトなわけで。(「デフォルト」 はデフォルトに設定されているキーボードタイプ)
きちんと入力させたいものに合わせてtypeを設定してやると、ユーザー的にはキーボード切り替えの手間は省ける。

ただし落とし穴があり、上記で 「デフォルト」 としたものは、タップしたとき必ずデフォルト設定キーボードが登場するわけではない。
たとえば上記であれば、

① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="search"をタップしてみる。

するとデフォルトが数字キーボードでもない限りデフォルトキーボードが出てくるはずなのだが…

答えは 「数字キーボードが居座り続ける」

そもそもキーボードの入れ替え自体が発生しない。

ただし、今度は
① type="text" のinputをタップし、数字キーボードに切り替えた後、
② type="email"をタップ、さらに数字キーボードに切り替えておく
③ またtype="text" のinputのうち、どれかをタップすると…

答えは 「デフォルトキーボードが立ち上がる」

自由すぎる…orz

また、 「数字だけを入力させたいんだ！」 ってところには type="tel"をわざと仕込んでやる、なんて手法もあるが、そのあたりでバグが一つ。

iOS5において、type="number"の 仕様 として、

① 「0930」など、"0"から始まる数字は、 valueにおいても0をないものと扱い、 例ならば「930」と認識する
② 3ケタごとに、「123,456,789」のように、","を入れて表示する。但しこちらは表示だけで、valueに影響は与えない。

という仕様がある。そのため、「電話番号入力」や「パスコード入力」のように、先頭の0を認めるものに対して type="number"を使うと正しく値が取れなくなる。




なお、iOS6からは治っている模様。 不評だったんだね…(・ω・`)

302を飛ばさない「リダイレクト」

なんか引っかかったのでメモメモφ(・ω・ )

302を飛ばさないでリダイレクトみたいな動きをするタグ

とあるページの通信を調べていたところ, 明らかにリダイレクトじみた動きをしているのに ステータスコード302が見当たらないと調べていたところ, 何やら変なタグを発見

<head>
<meta http-equiv="Refresh" content="0; URL=urlstring">
</head>

ヘッダにこんなのがいる真っ白なページを挟んでました
http-equiv="Refresh" は httpヘッダに refresh属性を仕込む宣言. もう一つの属性 contentと合わせて用いる. 内容はページのリフレッシュを行うことの宣言. なのでこれを仕込んでおくと自動でページを再読み込みしてくれる.
参考

content="0; URL=urlstring" が, リフレッシュまでの時間と, リフレッシュ後のURLの設定. 時間の単位は秒. この urlstringにリダイレクト先のURLを設定することで, 設定秒後に設定したURLにジャンプしてくれる.

移転したサイトの元サイトなんかに、メッセージとｋのタグを仕込んでおくと, ユーザーを自動で移転先のページに運ぶ, なんてのが一般的な使い方らしい.





ちょっと予想外だったのでびっくりした(・ω・`)

cssで吹き出し

なんか面白かったからつい…
というかどういう必要性に駆られて生まれたのかが気になる(・ω・`)

cssで吹き出しを作ろう

たとえばこんな感じ

('A`)




Σ('A`)

構造はこんな感じ

<style>
.fukidashi_outline{
    padding-bottom: 10px;
    position: relative;
}
.fukidashi_msg{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg:after{
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 6px;
}

</style>

<div class="fukidashi_outline">
    <div class="fukidashi_msg">
        たとえばこんな感じ
    </div>
</div>

メッセージ本体部と, 周りとの距離を測る部分, そこに吹き出しの三角形部分を作る cssを足して吹き出しに見せる. それだけ.シンプルです.

キモは15～23行目. ここで疑似クラスの :afterを用いて三角形を作り, 角を丸めた長方形の下にきれいにつくように配置する.

要するに三角形の位置と向きななわけだ

('A`)

Σ('A`)

三角形を横にするのもシンプル. 斜線を leftと rightで作っていたのを topと bottomに, 上底?を書いていた borderを border-leftにしてやり, 後は位置調整.

<style>
.fukidashi_outline2{
    padding-right: 12px;
    position: relative;
    display: table-cell;
}
.fukidashi_msg2{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg2:after{
    content: '';
    position: absolute;
    border-left: 10px solid #ccc;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    top: 10px;
    left: 110px;
}

.fukidashi_set2{
    display: table;
}

.fukidashi_chara2{
    display: table-cell;
    bottom: 10px;
}
</style>

<br />
<div class="fukidashi_set2">
    <div class="fukidashi_outline2">
        <div class="fukidashi_msg2">
            要するに三角形の位置と向きななわけだ
        </div>
    </div>
    <div class="fukidashi_chara2">
        ('A`)
    </div>
</div>

応用するとこんなことも…

('A`)

参考: CSSだけで簡単に吹き出しを作成する方法4つ！

first-childとかnth-last-child(x)とか

残業万歳！
眠い！∠( ﾟДﾟ)／気が付いたら6月だ！

cssで詰まったからメモメモφ(・ω・ )

疑似クラス:first-child系を用いた「絞り込み」と勘違い

何番目の要素, ってやつ

<div id ="parent">
<div class="child_node">1番目</div>
<h5>タイトル1</h5>
<div class="child_node">2番目</div>
<div class="child_node">3番目</div>
<h5>タイトル2</h5>
<div class="child_node">4番目</div>
<div class="child_node">5番目</div>
</div>

たとえばこんな構造だったとき. #parentの最初の要素を指定したい！なんて時に使えるのが疑似クラスの :first-child. 読んで字のごとく「最初の子」を指す. また, 逆に「最後の子」を指す :last-childなんてのも.

<style>
#parent{
    background-color: blue;
}

#parent div:first-child{
    background-color: red;
}

#parent div:last-child{
    background-color: red;
}
</style>

試しにこんなスタイルを当ててみる.

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

とまぁ色が変わっているのだが, 問題はここから. 「前から x番目の子」を指す :nth-child(x), 「後ろから x 番目の子」を指す :nth-last-child(x)など, 順番を指定し始めると始まる勘違い. たとえば, 「一番最後の h5を指定したい」, 「上から3番目の child_nodeを指定したい」と思った時に,

<style>
#parent .child_node:nth-child(3){
    background-color: green;
#parent h5:nth-last-child(1){
    background-color: green;
</style>

と正直に指定すると…

1番目

タイトル1

2番目

3番目

タイトル2

4番目

5番目

Σ('A`)
"2番目"に色がつくわh5に色はつかないわ散々なわけで. 原因は出力を見ればだいたいの想像はつくかと.
要するに

#parent .child_node:nth-child(3)

とは,
「id=parentの子の, class=child_nodeの中での3番目のもの」ではなく,
「id=parentの子の中で3番目の子で, かつclass=child_nodeなら」という,
ある意味では確かに「絞り込み」を行っているみたい('A`)ソリャネェヨ

なので結局, 「x番目の子」という, 構造が変わると効果がなくなる不安定な絞り込みには変わりないものだったりするorz.




日本語と英語の解釈の違いみたい(・д・`)

スクリプトでcheckboxの一括選択/解除

Playでページ作っていく際に
テーブルの中にある複数のチェックボックスを一括で選択/解除できるチェックボックスが欲しいなー
って事で
意外とテーブルの中なんかで起こりやすい「一つのformタグにまとめられない状況」の例が見当たらなかったのでこれ幸いにとメモメモφ(・ω・ )

checkbox一括選択/解除

なおjQuery使います. var. 1.9.0

といってもたいしたコードでもないのでさくっと

function allHoge{
    $(".childHoge").prop("checked", $("#parentHoge").is(":checked")));
}

一行でしたorz
parentHogeを全選択/解除のキーとなるチェックボックスやボタンに id として設定.
childHogeを上に影響されるチェックボックス全てに class として設定
もちろん名前は適当なのでお好みで
最後にparentHogeを設定した同じところにでも

onclick="allHoge()"

と設定してやるとOK.
ボタンかチェックボックスか全選択/解除をクリックするごとに
childHogeと設定したチェックボックスが切り替わる.

以下簡単に内容

$("#parentHoge").is(":checked")

jQueryの is( )メソッド.
引数内の要素を持っているか否かでtrue か falseを返す.
この場合は

:checked

を持っているか否か, すなわちチェックされているか否かをtrue/falseで取得する.
ここで全選択/解除のどちらが選ばれたかを取得する

$(".childHoge").prop("checked", true/false);

ちょっと置き換えて見やすく(?)
jQueryの prop()メソッド
引数内のマップで操作を行なう
この場合は checked要素の値を true/falseに変更する
という操作
これを組み合わせて
「子に指定したチェックボックスのチェック状態を親に指定したチェックボックスの状態と同じものに切り替える」
となる

ただこの .prop
似たようなものに .attrというものがある.
こちらを使うと最初の1回だけ同じように動いてくれるが, 2回目以降は全選択ができなくなる.
おそらくだがHTML上だけ書き換えてプロパティとしては反映されていない感じ
何というトラップ・・・('A`)

こことか参考になるかと








雪やまないかなぁ・・・('A`)