ホームページ > 記事 > ウェブフロントエンド > jqueryページフォーカスの動的使用
jqueryページフォーカスの動的使用
- php中世界最好的语言オリジナル
- 2018-04-26 14:05:191612ブラウズ
今回は、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(){
$('input').focus(function(){
$(this).addClass('redBack');
//alert("hello");
});
$('input').blur(function(){
$(this).removeClass('redBack');
});
});
</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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。