jQueryでテキストボックスのフォーカスを実現

11080 ワード

JavaScript jquery XHTML css IE

作成者:
Realazy
まず私たちの目的を説明します.現代ブラウザ(modern browsers)のテキストボックスのフォーカス(focus)スタイルはCSSの擬似クラス:focusによって設定できることを知っています.このようなコードがあるとします.


<form>
    <dl>
        <dt>Name: <dt>
            <dd><input type="text" /></dd>
        <dt>Password: <dt>
            <dd><input type="password" /></dd>
        <dt>Textarea: <dt>
            <dd><textarea></textarea></dd>
    </dl>
</form>

このようなCSSはfocusスタイルを解決することができます.


input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }

簡単ですが、そうですか.どの現代ブラウザでもテストできます(Firefox,Safari,IE 7):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Step 1 | jQuery Tutorial</title>
 <style type="text/css" media="screen">
  body { font: .9em/1.5 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }
  form { width: 20em; margin: 4em auto; }
  dt { clear: left; float: left; }
  dd { clear: right; margin-left: 6em; }
  input[type="text"], input[type="password"], textarea { width: 12em; border: 1px solid #ccc; }
  input[type="text"]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
 </style>
</head>
<body>
 <form>
  <dl>
   <dt>Name: <dt>
   <dd><input type="text" /></dd>
   <dt>Password: <dt>
   <dd><input type="password" /></dd>
   <dt>Textarea: <dt>
   <dd><textarea></textarea></dd>
  </dl>
 </form>
</body> 
</html>

IE6? ほほほ、これはこのチュートリアルの目的で、間違いなく、IEがサポートしていない以上:focus、私たちはUsing DOM Scripting to Plug the Holes in CSSしかありませんが、私たちはjQueryで実現します.
まずjQueryの働き方を見てみましょう.jQueryはドル記号$を使用してjQueryオブジェクトを返し、jQueryが提供するAPI(インタフェース)を使用することができます.多くの実用的なので、Visual JQueryを参照して操作してください.
私たちはすべてプログラムを理解していません.はい、私はあなたが私とこのようにして、ただいくつかの最も基本的な文法を理解しています(エビには向いていません.達人は身分を平らにしないでください).私たちが分からない以上、CSSの方法で考えます.
まずDOMからtype="text",type="password"のinputとtextareaを得る.はい、私たちの偉大なドルが登場しました.ああ、ドル記号です.リファレンス
http://proj.jquery.com/docs/Base/Expression/CSS/、私たちは彼らを選ぶことができることを知っています.


$("input[@type='text'], input[@type='password'], textarea")

それらを選択したら?私たちはイベント(event)で処理しなければなりません.:focus対応のイベントはonfocusですが、jQueryはonが嫌いなのでfocusです.
http://proj.jquery.com/docs/EventModule/ ).そこで私たちはこのようにすべきことを知っています.


$("input[@type='text'], input[@type='password'], textarea").focus();

へへへ、私たちはもう大きな一歩を踏み出しました!私たちはfocusに何をすべきかを教え続けなければなりません.jQueryでは、通常、匿名の関数が必要です.理解しないでください.続けましょう.


$("input[@type='text'], input[@type='password'], textarea").focus( function(){ } );

私たちの目的は何ですか.はい、フォーカスしたテキストボックスにスタイルを付けます.jQueryにはcss(prop)のAPIがあり、前のCSSを参照して、私たちはこのように書くことができます.


css({background:"#fcc", border:"1px solid #f00"})

bingo! 成功まであと一歩.オブジェクト自体に戻ってthisを使用することを知っていると仮定します.jQueryでは、自身を返すのももちろんthisですが、返すオブジェクトがjQueryオブジェクトなのか、ドル記号を使う必要があります.だから$(this).では、


$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:”#fcc”, border:”1px solid #f00″})} );

That’s it! どうやってこのコードを実行すればいいのでしょうか?私たちはbody onload=""が使えることを知っていて、windowも知っています.onloadは使用できますが、jQueryは構造とインタラクションをさらに分離できるより良いスキームを提供しています.


$(document).ready(function(){
    // Your code here...
});

コードを入れるだけです


$(document).ready(function(){
    $("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this). css({background:"#fcc", border:"1px solid #f00"})} );
});

ほほほ......成功したようです.待って、私たちは仏を西天に送って、良い人は最後までやります......上のインタラクションの中で、焦点を合わせる情況だけあって、それでは焦点を失う時?ええ、もちろん考えないでください.焦げていますか.では、フォーカスのスタイルは自動的にクリアされますか~いいえ、私たちが明確に教えない限り.ひょうたんでひょうたんを描く:


$(this).blur(function(){$(this).css({background: "transparent", border: "1px solid #ccc"})})

はい、jQueryの強みといえば、jQueryオブジェクトは無数の関数コールバック/メッセージ/メソッド(どちらが正しいか、上級者に教えてもらう)、つまり伝説のChainabilityを受け入れることができます.つまり、2行に分けて書く必要はありません.


$(document).ready(function(){
    $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#fcc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: “transparent”, border: “1px solid #ccc”})});
})

ああ、また完成したようですね.ちょっと待ってください.私たちはIEに対してだけです.他のブラウザはCSSを使って実現することができます.私たちはJSを使って処理効率を下げるのに苦労していますか.だから、jQueryが持っている定義を使いました.


$(document).ready(function(){
 if ($.browser.msie){
  $(”input[@type=’text’], input[@type=’password’], textarea”).focus(function(){$(this).css({background:”#fcc”, border:”1px solid #f00″})}).blur(function(){$(this).css({background: “transparent”, border: “1px solid #ccc”})});
 }
})

えっ!私たちは本当に完成しました!うん、ブラウザのバージョンを判断しますか?jQueryは提供していないようですが、このjQueryプラグイン(plugin):jQBrowserを見ることができます.うんうん、みんなに言うのを忘れたようですが、jQueryには超強力なプラグインがたくさんあります!時間があれば、いくつかを整理してみんなに捧げます.
はい、私たちのこの一歩の成果を見て、必ずIE 6で見てください.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Step 2 | jQuery Tutorial</title>
 <style type="text/css" media="screen">
  body { font: .9em/1.5 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }
  form { width: 20em; margin: 4em auto; }
  dt { clear: left; float: left; }
  dd { clear: right; margin-left: 6em; }
  input, textarea { width: 12em; border: 1px solid #ccc; }
  input:focus, textarea:focus { border: 1px solid #f00; background: #ffc; }
 </style>
 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 if ($.browser.msie){
  $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({background:"#fcc", border:"1px solid #f00"})}).blur(function(){$(this).css({background: "transparent", border: "1px solid #ccc"})});
  }
 })
 </script>
</head>
<body>
 <form>
  <dl>
   <dt>Name: <dt>
   <dd><input type="text" /></dd>
   <dt>Password: <dt>
   <dd><input type="password" /></dd>

   <dt>Textarea: <dt>

   <dd><textarea></textarea></dd>
  </dl>
 </form>
</body> 
</html>

もう一度完成したようです(汗、前は本当に完成したと言っていたのではないでしょうか)、いいえ!皆さんは私が何をしたか覚えていますか?そうそう、Web標準です!Web標準は何を提唱していますか?构造、表现、交际は互いに分离して、私达は様式をJSの中で书いて、これは良いことではないと信じています.私たちjQueryを倒すことはできません!考えを変えて、私たちはスタイルを1つのclassで定義して、focusの時にこのclassを加えて、blurの時にこのclassを取り除いてOKではありませんか?聡明......jQueryの対応するAPIはaddClassとremoveClassです.プロセスは無駄ではありません.そうしないと、紙幅は半分に増えなければなりません(私はまだ寝なければなりません.明日も出勤します.かわいそうなサラリーマン).コードは以下の通りです.


$(document).ready(function(){
 if ($.browser.msie){
 $("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).addClass("ie_focus")}).blur(function(){$(this).removeClass("ie_focus")});
 }
})

このclassをieと名付けたことを認めなければなりませんfocusは少し変態です.はい、さらに、私たちのコードは大きくありませんが、独立したファイルも分離しましょう.これは私たちの最後のステップのプレゼンテーションです.ソースコードを見てください.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Step 3 | jQuery Tutorial</title>
 <style type="text/css" media="screen">
  body { font: .9em/1.5 "Lucida Grande", "Trebuchet MS", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif; }
  form { width: 20em; margin: 4em auto; }
  dt { clear: left; float: left; }
  dd { clear: right; margin-left: 6em; }
  input, textarea { width: 12em; border: 1px solid #ccc; }
  input:focus, textarea:focus { border: 1px solid #f00; background: #fcc; }
  .ie_hover { background: #ffc; }
  .ie_focus { border: 1px solid #f00; background: #fcc; } 
 </style>
 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="form_enhencement_for_ie.js"></script>
</head>
<body>
 <form>
  <dl>
   <dt>Name: <dt>
   <dd><input type="text" /></dd>
   <dt>Password: <dt>
   <dd><input type="password" /></dd>

   <dt>Textarea: <dt>

   <dd><textarea></textarea></dd>
  </dl>
 </form>
</body> 
</html>

簡単ですよね?jQueryの威力はそれだけではありません.もっとクールでもっと強い機能が必要です.私はあなたと一緒に探求します.

asp.NetのGridViewコントロールの使い方大全

ASPを設定する.NETページがキャッシュされない(クライアント/サーバ側キャッシュ解除方法)