jqueryページフォーカスの動的使用-jsチュートリアル-php.cn

jqueryページフォーカスの動的使用

php中世界最好的语言

リリース： 2018-04-26 14:05:19

オリジナル

1657 人が閲覧しました

今回は、jquery page focus の動的使用について説明します。 jquery page focus を動的に使用する場合の注意事項について説明します。実際のケースを見てみましょう。

ユーザーがテキストを入力しているときに、入力しているテキストボックスを強調表示できれば、より使いやすくなります。これを実現するために jQuery を使用してみましょう。

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

<html> 
<head>
<title>焦点</title> 
<style type="text/css">
.redBack{}{ 
color:white; 
background:red; 
border:2px solid black; 
} 
</style> 
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$(&#39;input&#39;).focus(function(){ 
$(this).addClass(&#39;redBack&#39;); 
//alert("hello"); 
}); 
$(&#39;input&#39;).blur(function(){ 
$(this).removeClass(&#39;redBack&#39;); 
}); 
}); 
</script> 
</head> 
<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> 
</html>

ログイン後にコピー

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

alert("姓名不能为空！"); 
//由id定位到需要的焦点 
$("#name").focus();

ログイン後にコピー

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

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jqueryは、指定されたテキストボックスに数字のみを入力できることを実現します

Jquery+モバイルカスタムボタンアイコンの手順の詳細な説明

以上がjqueryページフォーカスの動的使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。