textセレクター
セレクター:textは、タイプがtextのinput要素を選択します。タグinputを参照してください。
:textはCSS仕様には属さないため、現代のブラウザーではパフォーマンス向上のために、代わりに[type='text']を使用することをお勧めします。
構文
タイプがtextのinput要素を選択するには、以下のようにします:
$(':text');
他の疑似クラスセレクター(':'で始まるもの)と同様に、':'の前にタグ名や他のセレクターを指定することをお勧めします。そうしないと、セレクター'*'が適用され、$(':text')は$('*:text')として解釈されてしまいます。そのため、$('input:text')を使用する方が良いでしょう。
:textは、type属性が指定されていないinput要素も選択することに注意してください。動作の違いは以下の例で確認できます:
$('<input>').is('[type=text]'); // falseを返します
$('<input>').is(':text'); // trueを返します
例
タイプがtextのすべてのinput要素を選択し、メソッドcssを使用して緑の背景と赤い枠線を適用してみましょう:
<form>
<input type="button" value="button">
<input type="file">
<input type="checkbox">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="checkbox">
<input type="text">
</form>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // フォーム送信を防止します
});