jQuery でフォームフォーカスの背景色変更
- 投稿日 : 2007-10-02, 06:54（）
- タグ（jQuery CSS Usability）
- カテゴリ（Javascript）
- 記し人（luvsic）
- 閲覧数（2394）
- test null 13
- test 1-3
- test 2-3
アクセシビリティの一環。
意外と動作は軽かったりする。フォームの数によるけど。
パスワードのinputも変化できるのはちょっと驚き。
ページがロードされ終わった時にpasswordとtextとtextareaにjTextのCSSのclassを付与する。
Javascript
/* Form Text Style */
$(document).ready(function() {
$("input[@type=password], input[@type=text]").addClass("jText");
$("input[@type=password], input[@type=text], textarea").focus(function() {
$(this).addClass("jFocus");
});
$("input[@type=password], input[@type=text], textarea").blur(function(){
if ($(this).find(".jFocus")) {
$(this).removeClass("jFocus");
}
});
});
$(document).ready(function() {
$("input[@type=password], input[@type=text]").addClass("jText");
$("input[@type=password], input[@type=text], textarea").focus(function() {
$(this).addClass("jFocus");
});
$("input[@type=password], input[@type=text], textarea").blur(function(){
if ($(this).find(".jFocus")) {
$(this).removeClass("jFocus");
}
});
});
CSS
input.jText, textarea, select {
padding:4px 2px 2px !important;
border:1px solid #A7A6AA;
}
input[type="text"] {
padding:4px 2px 2px !important;
border:1px solid #A7A6AA;
}
.jFocus {
background:#e7ffd7;
}
padding:4px 2px 2px !important;
border:1px solid #A7A6AA;
}
input[type="text"] {
padding:4px 2px 2px !important;
border:1px solid #A7A6AA;
}
.jFocus {
background:#e7ffd7;
}
サンプル
input type="text"
テキストエリア
ライセンスフリー、と書いておいたほうがいいのだろうか。
けどおいらしか使わなさそう。
【アップデート 2009年1月24日】
jQueryが1.3にアップデートし、記述ルールが変わっています。
下記のコードで、 1.3.0で動作確認しました。
/*
*
* Style for input, TextArea, select.
* update: 1/15,2009
*
*/
jQuery(function() {
$('input[type=password], input[type=text]').addClass('jText');
$('input[type=password], input[type=text], textarea').focus(function() {
$(this).addClass('jFocus');
});
$('input[type=password], input[type=text], textarea').blur(function() {
if ($(this).find('.jFocus')) {
$(this).removeClass('jFocus');
}
});
});
*
* Style for input, TextArea, select.
* update: 1/15,2009
*
*/
jQuery(function() {
$('input[type=password], input[type=text]').addClass('jText');
$('input[type=password], input[type=text], textarea').focus(function() {
$(this).addClass('jFocus');
});
$('input[type=password], input[type=text], textarea').blur(function() {
if ($(this).find('.jFocus')) {
$(this).removeClass('jFocus');
}
});
});
No comments yet