jquery のページフォーカスの位置 (テキストボックスはフォーカスを取得するとスタイルが変わります)

ホームページ

ウェブフロントエンド

jsチュートリアル

jquery のページフォーカスの位置 (テキストボックスはフォーカスを取得するとスタイルが変わります)_jquery

May 16, 2016 pm 06:20 PM

スタイルを変更するテキストボックス

機能の実装:
ユーザーがテキストを入力するときに、入力しているテキストボックスを強調表示できれば、より使いやすくなります。以下では、これを jQuery を使用して実装します。

実装原則:
ドキュメントが読み込まれた (準備ができた) 後、入力のフォーカスイベントとブラーイベントを追加し、スタイルを追加および削除します。
コード例:

コードをコピーコードは次のとおりです:

 
<html> ; 
<head></title> 
<style type="text/css"> 
color:white;背景:赤 ; 
ボーダー:2px 黒一色 
</style> 
<script language="javascript" src="jquery-1.1.4.js" type=" text/javascript "></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$('input').focus( function() { 
$(this).addClass('redBack'); 
//alert("hello") 
}); 

$('input'); Blur(function (){ 
$(this).removeClass('redBack'); 
}) 
}); 🎜><body> 
<input type="text" value="hello,shanzhu" id="myText"> 
<input type="text" value="hello,shanzhu" id ="myText2 "> 
<input type="text" value="hello,shanzhu" id="myText3"> 
<input type="text" value="hello,shanzhu" id ="myText4 "> 
<input type="text" value="hello,shanzhu" id="myText5"> 
<input type="text" value="hello,shanzhu" id ="myText6 "> 
</body> 


 アラートの後、カーソルは指定された位置。調べてみると、簡単にフォーカス属性を達成できることが分かりました。 

alert("名前を空にすることはできません!"); 

//ID で必要なフォーカスを見つけます 

$("#name").focus(); 🎜>
つまり、プロンプトが出力された後、フォーカスは入力項目に戻ります。同様に、対応するスタイルを追加することもできます。入力中のテキストボックスを強調表示できれば、さらに使いやすくなります。これを実現するために jQuery を使用します。

ドキュメントが読み込まれた (準備ができた) 後、入力のフォーカスイベントとブラーイベントを追加し、スタイルを追加および削除します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。