JS清除文字方塊內容離開在恢復及滑鼠離開文字方塊時觸發js的方法_javascript技巧
- WBOY原創
- 2016-05-16 15:20:421431瀏覽
多網站的需要填寫的文字框在預設狀態下都會給出一個預設的提示語言，當滑鼠點擊此文字框的時候能夠將裡面的預設文字清除，當刪除輸入的文字且焦點離開文字框的時候再將預設的文字寫入文字方塊。
程式碼如下:
<!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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn