jQuery でフォームフォーカスの背景色変更
- 投稿日 : 2007-10-02, 06:54（最終更新日時 : 2010-06-10, 18:20）
- タグ（jQuery CSS Usability）
- カテゴリ（Javascript）
- 記し人（luvsic）
- 閲覧数（4125）
- ver1.2 / 比較
アクセシビリティの一環。
意外と動作は軽かったりする。フォームの数によるけど。
パスワードの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-color: #ecf9ff !important;
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
border-color: rgba(82, 168, 236, 0.75) !important;
outline: medium none;
}
padding: 4px 2px 2px !important;
border: 1px solid #A7A6AA;
}
input[type="text"] {
padding: 4px 2px 2px !important;
border: 1px solid #A7A6AA;
}
.jFocus {
background-color: #ecf9ff !important;
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
border-color: rgba(82, 168, 236, 0.75) !important;
outline: medium none;
}
サンプル
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