Rumah  >  Artikel  >  hujung hadapan web  >  Kaedah JS untuk mengosongkan kandungan kotak teks dan mencetuskan js apabila kotak teks dipulihkan dan tetikus meninggalkan kemahiran kotak teks_javascript

Kaedah JS untuk mengosongkan kandungan kotak teks dan mencetuskan js apabila kotak teks dipulihkan dan tetikus meninggalkan kemahiran kotak teks_javascript

WBOY
WBOYasal
2016-05-16 15:20:421433semak imbas

Kotak teks yang perlu diisi pada berbilang tapak web akan memberikan bahasa gesaan lalai secara lalai Apabila tetikus mengklik pada kotak teks ini, teks lalai di dalam boleh dikosongkan apabila teks yang dimasukkan dipadamkan dan fokus meninggalkan kotak teks Kemudian tulis teks lalai ke dalam kotak teks.

Kod adalah seperti berikut:

<!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> 

Kod di atas menyedari keperluan kami Apabila kotak teks diklik, kandungan dalam kotak teks boleh dikosongkan Jika tiada kandungan dimasukkan dalam kotak teks, apabila fokus tetikus meninggalkan kotak teks pada masa ini nilai kotak teks akan dipulihkan kepada keadaan lalai. Walau bagaimanapun, jika kotak kata laluan agak menyusahkan kerana kotak kata laluan tidak dipaparkan dalam teks yang jelas, penyelesaiannya boleh didapati dalam pelaksanaan JavaScript bagi gesaan apabila kotak input (kotak kata laluan) muncul.

Cara mencetuskan js apabila tetikus meninggalkan kotak teks

<%@ 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> 
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn