ホームページ >ウェブフロントエンド >jsチュートリアル >クリックしてテキストボックスをクリアすると、JavaScript は自動的にデフォルトのテキストを復元します_javascript スキル
クリックしてテキストボックスをクリアすると、JavaScript は自動的にデフォルトのテキストを復元します_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:20:401433ブラウズ
この記事の例では、テキスト ボックスをクリックしてデフォルトのテキストをクリアし、そのままにして復元する JS サンプル コードを紹介します。具体的な内容は次のとおりです。
関連知識:
1. onclick イベントの定義と使用法:
このイベントは、オブジェクトをクリックするとトリガーされます。
ブラウザのサポート:
1)、IE ブラウザはこのイベントをサポートしています。
2) Firefox ブラウザはこのイベントをサポートしています。
3) Opera ブラウザはこのイベントをサポートしています。
4) Google Chrome はこのイベントをサポートしています。
5)、Safria ブラウザはこのイベントをサポートしています。
コード例:
<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
上記のコードは、div の onclick イベント ハンドラーを登録します。div がクリックされると、このハンドラーが実行されて、div の背景色が緑色に設定されます。
2. onblur イベントの定義と使用法:
このイベントは、指定されたオブジェクトがフォーカスを失ったときにトリガーされます。
コード例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("username");
username.focus();
username.onblur=function(){
username.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>
上記のコードは、イベント ハンドラー関数を入力要素の onblur イベントにバインドします。入力要素がフォーカスを失うと、背景色を緑色に設定できます。
次のステップが最も重要です: テキスト ボックスをクリックしてデフォルトのテキストをクリアし、そのままにしてから復元します
多くの Web サイトで入力する必要があるテキスト ボックスには、デフォルトでデフォルトのプロンプト言語が表示され、このテキスト ボックスをクリックすると、入力したテキストが削除され、フォーカスがクリアされます。テキスト ボックスを残します。 次に、デフォルトのテキストをテキスト ボックスに書き込みます。
コードは次のとおりです:
<html>
<head>
<meta charset="gb2312">
<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>
上記のコードは、テキスト ボックスをクリックすると、テキスト ボックスに内容が入力されていない場合、この時点でマウス フォーカスがテキスト ボックスから離れると、テキスト ボックス内の内容をクリアできます。テキストボックスの値がデフォルトの状態に戻ります。ただし、パスワード ボックスがプレーン テキストで表示されないため、パスワード ボックスが少し面倒な場合は、パスワード ボックスにプロンプトを実装する方法に関する次の段落で解決策を見つけることができます。
パスワード ボックスにプロンプトが表示されることを確認する方法:
場合によっては、ログイン フォームに「ユーザー名を入力してください」や「パスワードを入力してください」などのプロンプトを表示する必要があります。ユーザー名については、言うのは簡単ですが、「パスワードボックスに「パスワードを入力してください」と表示されます。このような言語だと、パスワードボックスに入力した内容がクリアコードで表示されないので、少し面倒です。 type 属性が動的に制御される場合、入力がページにすでに存在する場合、type 属性は IE8 および IE8 より前のブラウザでは読み取り専用になります。したがって、他の方法を考える必要があります。コードは次のとおりです。
<html>
<head>
<meta charset="gb2312">
<title脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
実装原理は非常にシンプルで、デフォルトの状態では、type="text" でテキストボックスが表示され、テキストボックスをクリックすると、元々表示されていたテキストボックスが非表示になります。 、これは単なる交換であることを意味します。