【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない？
jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用 機能追加編
以前紹介した、入力フォームでプレースホルダーを実現する方法を紹介したのですが、inputのvalue値を元にセレクタの指定をしようとしたところ、うまく動作していないことに今更気づいた。
エントリーを書いた当時は問題なかったから書いていたと思うのですが、今確認しても動かないという・・・とりあえず確認してみることに。
動作していない部分
動作していなかったのは、入力後のボタンを押した後に、何も入力がされていなかった場合に、プレースホルダーとして入れていた文字を消すという部分。
valueが空っぽの時に「キーワードを入力」を表示させておくという例なのですが、その「キーワードを入力」という文字を元にセレクタを指定していたのですが、どうやらこれがうまく動いていない様子。
何が原因か最初分からなかったので、とりあえずデモを作成してみた。プレースホルダーをjQueryで実現させたもの、valueにあらかじめ「キーワードを入力」を入れたもの、それと、別な文字列をvalueにいれたもの、この３つと、jQueryのセレクタをinput[value="キーワードを入力"]にした時と、[value="キーワードを入力"]と、属性値だけにしたもの、それともう一つ、:text[value="キーワードを入力"]としたもの。これらで実験！
■デモ
input？:text？ - jsdo.it - share JavaScript, HTML5 and CSS
リロードもしつつそれぞれのボタンを押してみてもらいたい。
予め入力されていたか、後で入力されたか
デモを見てみると違いがわかると思うのですが、input[value="◯◯"]としたセレクタは、あらかじめvalue値に入っている値を元に要素が選択される。[value="◯◯"]だけの時も同じ。
jQueryでプレースホルダーを実現させたもの（後から入力された値）は、選択されないのであった。
:text[value="◯◯"]の場合
input[value="◯◯"]の場合の違いはわかったのだけど、:text[value="◯◯"]の場合はまた違っていて、後で入力された値もセレクタの対象になっている。
ちなみに、現在のjQuery1.6.1だけでなく、前の1.3以降が今回ご紹介しているような動作になる。jQuery1.2〜jQuery1.2.6の場合はinput[value="◯◯"]でも入力後が含まれるものが対象になっていたという・・・
前に試した時は、jQuery1.2系だった時のやつだったために、問題なく動作していたんですが、それ以降は仕様が変わったために動かなかったということか。
