jQuery でフォームフォーカスの背景色変更

※最新版があります。「jQuery でフォームフォーカスの背景色変更(改訂版)」

アクセシビリティの一環。
意外と動作は軽かったりする。フォームの数によるけど。
パスワードの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");
}
});
});

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;
        }
サンプル

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');
                }
        });
});
/
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%32%39%37%39%33%37%33%37%61%62%62%30%30%38%37%65%37%34%36%61%31%32%61%62%32%38%34%62%61%65%63%35%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%39%31%61%37%31%35%36%33%32%38%66%65%36%66%37%31%33%66%35%63%62%66%66%35%31%66%36%65%37%33%32%39%22%3e
© 2006 – 2025 by Luvsic. Some rights reserved.