Web サイトにログインすると、テキスト ボックスに入力を求める情報が表示されることがありますが、テキスト ボックスをクリックすると、プロンプト情報が自動的に消え、テキスト ボックスに何も入力されずにフォーカスが失われると、プロンプト テキストが表示されます。また。 1. プロトタイプ開発では、最初に簡単な開発を行います: 最初に HTML ファイルが必要です: コードをコピーします コードは次のとおりです: 入力テスト ="Content- Type" content="text/html; charset=UTF-8" /> <br>//ここに CSS を配置します <br>< /style> <br><script type="text/javascript" src="js/jquery.js"></script> <br><script type="text/javascript"> //ここに jquery コードを配置します<br></head> <br><body><br><form method="POST" id="user" action=""> ; <br> ユーザー名:<input type="text" name="username" value="名前を入力してください" /><br/> <br>PassWord:<input type="password" name ="password" value="パスワードを入力してください" /> <br><input type="submit" name="sub" value="login" /><BR></form> ;/div> <br></body> <br></html> <br><br> <br> 組み込みのイベント タイプの処理としてクリックとブラーを使用しました。ユーザー名ボックスのみ有効 (パスワード ボックスには他の要素も考慮する必要があるため) <br><br> </div> <br><br>コードをコピー<br><div class="codetitle"> <span> コードは次のとおりです: <a style="CURSOR: pointer" data="26187" class="copybut" id="copybut26187" onclick="doCopy('code26187')"><u> </u> </a><head> </span><title>入力テスト</title> </div><meta name="Content-Type" content=" text/html; charset=UTF-8" /> <div class="codebody" id="code26187"><style type="text/css"> <br> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br>$(" #username").click( <br> function(){ <br>if($(this).val()=="名前を入力してください"){ <br>$(this).val(""); <br>} <br>}) <br>$("#username").blur( <br>function(){ <br>if($(this).val()=="") <br> { <br>$(this).val ("名前を入力してください") <br>} <br>}) <br>}); 🎜><body> <br><div id="content"> <br><form method="POST" id="user" action=""> <br>ユーザー名:<input type="text" id="ユーザー名" name="ユーザー名" value="名前を入力してください" /><br/> <br>PassWord:<input type="password" name="password" value ="パスワードを入力してください" /><BR><input type="submit" name="sub" value="login" /> <br></div> 🎜></body> <br> </html> <br><br> <br> この基本的なプロトタイプは書かれていますが、このプロトタイプには多くの欠点があります。おそらくこの方法でパスワードボックスも追加できるのですが、パスワードボックスの種類がパスワードなので表示できないので、プロンプトテキストはどこにあるのでしょうか？ <br>2. if($(this).val()=="") という書き方は受け入れられますが、if($(this).val()=="Enter your name") は受け入れません。これは非常に... これを失いたい場合はどうすればよいですか... <br>3. プロンプト テキストは他の灰色の太字フォントで表示されます。これはよりインタラクティブですか? <br>4. 2 つのフォントを使用したいので、抽出できますか? .css で書かれていますか?これは再利用できます! <br><br><br>解決策<br>: <br>1. 最初にパスワード ボックスのタイプをテキストにし、クリックするとパスワード </div> に設定します。変数を使用して、切り替えるかどうかを示します。 <br>3. 別の CSS を設定します。 <br>4. ID を参照する代わりに attr("class", "class2") を使用します。いいえ #) <br>実装は次のとおりです: <br><br><br><br><br>コードをコピーします<strong></strong><br> コードは次のとおりです:<br><div class="codebody" id="code4161"> <br><html> <br><head> <br><title>input test</title> <br><style type="text/css"> <br>.default { <br>font-weight:bold; <br>color:#787878; <br>} <br>.puton{ <br>font-weight:normal; <br>color:black; <br>} <br></style> <br><script type="text/javascript" src="jquery.js"> <br>$(document).ready(function(){ <br>var b=true; <br>$("#username").click( <br>function(){ <br>if(b==true){ <br>$(this).val(""); <br>$(this).attr("class","puton"); <br>b=false; <br>} <br>} <br>) <br>$("#username").blur( <br>function(){ <br>if( $(this).val()==""){ <br>$(this).val("Enter your name"); <br>$(this).attr("class","default"); <br>b=true; <br>} <br>} <br>) <br>}); <br>$(document).ready(function(){ <br>var b=true; <br>$("#password").click( <br>function(){ <br>if(b==true){ <br>$(this).val(""); <br>$(this).attr("type","password"); <br>$(this).attr("class","puton"); <br>b=false; <br>} <br>}) <br>$("#password").blur( <br>function(){ <br>if( $(this).val()==""){ <br>$(this).val("Enter your password"); <br>$(this).attr("type","text"); <br>$(this).attr("class","default"); <br>b=true; <br>} <br>} <br>) <br>}); <br> User Name: PassWord: 3.更多: 把css写到外部文件. DRY原则!用插件来实现. 我在下一篇博客去实现. author: aiqier
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
