ホームページ >ウェブフロントエンド >jsチュートリアル >テキスト ボックスが復元され、マウスがテキスト ボックスから離れたときにテキスト ボックスの内容をクリアし、JS をトリガーする JS メソッド_javascript スキル
複数の Web サイトで入力する必要があるテキスト ボックスには、デフォルトでデフォルトのプロンプト言語が表示されます。このテキスト ボックスをクリックすると、入力したテキストが削除され、フォーカスがクリアされます。テキスト ボックスを残します。 次に、デフォルトのテキストをテキスト ボックスに書き込みます。
コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>点击文本框清除默认值</title> <script type="text/javascript"> window.onload=function() { var username=document.getElementById("username"); username.onclick=function() { if(username.value=="请输入您的姓名") { username.value=""; this.focus(); } } username.onblur=function() { if(username.value=="") { username.value="请输入您的姓名"; } } } </script> </head> <body> <input type="text" value="请输入您的姓名" id="username" /> </body> </html>
上記のコードは、テキスト ボックスをクリックすると、テキスト ボックスに内容が入力されていない場合、この時点でマウス フォーカスがテキスト ボックスから離れると、テキスト ボックス内の内容をクリアできます。テキストボックスの値がデフォルトの状態に戻ります。ただし、パスワード ボックスがクリア テキストで表示されないため、パスワード ボックスが少し面倒な場合は、入力ボックス (パスワード ボックス) が表示されるときのプロンプト の JavaScript 実装で解決策が見つかります。
マウスがテキストボックスから離れたときに js をトリガーする方法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="textBox.WebForm1" %> <!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"> <head runat="server"> <title></title> <script type="text/javascript"> function validate() { var name = document.getElementById("txtName"); if (name.value == 2) { alert("你必须不是二!"); name.focus(); return false; } return true; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtName" onblur="validate();" runat="server" /> </div> </form> </body> </html>