THE HAM MEDIA BLOG

【jQuery】inputのvalue値をもとにしたセレクタがうまく動かない?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
セレクタ
input
属性値

jQueryを使って入力フォームにサンプル文字を入れておくスクリプト

以前紹介した、入力フォームでプレースホルダーを実現する方法を紹介したのですが、inputのvalue値を元にセレクタの指定をしようとしたところ、うまく動作していないことに今更気づいた。

エントリーを書いた当時は問題なかったから書いていたと思うのですが、今確認しても動かないという・・・とりあえず確認してみることに。

動作していない部分

動作していなかったのは、入力後のボタンを押した後に、何も入力がされていなかった場合に、プレースホルダーとして入れていた文字を消すという部分。

valueが空っぽの時に「キーワードを入力」を表示させておくという例なのですが、その「キーワードを入力」という文字を元にセレクタを指定していたのですが、どうやらこれがうまく動いていない様子。

何が原因か最初分からなかったので、とりあえずデモを作成してみた。プレースホルダーをjQueryで実現させたもの、valueにあらかじめ「キーワードを入力」を入れたもの、それと、別な文字列をvalueにいれたもの、この3つと、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系だった時のやつだったために、問題なく動作していたんですが、それ以降は仕様が変わったために動かなかったということか。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。