Maison > interface Web > js tutoriel > le corps du texte

Méthode JS pour effacer le contenu de la zone de texte et déclencher js lorsque la zone de texte est restaurée et que la souris quitte les compétences text box_javascript

WBOY
Libérer: 2016-05-16 15:20:42
original
1431 Les gens l'ont consulté

Les zones de texte qui doivent être remplies sur plusieurs sites Web donneront par défaut une langue d'invite par défaut. Lorsque la souris clique sur cette zone de texte, le texte par défaut à l'intérieur peut être effacé lorsque le texte saisi est supprimé et le focus. quitte la zone de texte. Ensuite, écrivez le texte par défaut dans la zone de texte.

Le code est le suivant :

<!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> 
Copier après la connexion

Le code ci-dessus répond à nos exigences. Lorsque vous cliquez sur la zone de texte, le contenu de la zone de texte peut être effacé. Si aucun contenu n'est saisi dans la zone de texte, lorsque le focus de la souris quitte la zone de texte à ce moment-là. La valeur de la zone de texte sera restaurée à son état par défaut. Cependant, si la zone de mot de passe est un peu gênante car la zone de mot de passe n'est pas affichée en texte clair, la solution peut être trouvée dans l'implémentation JavaScript de l'invite lorsque la zone de saisie (zone de mot de passe) apparaît.

Comment déclencher js lorsque la souris quitte la zone de texte

<%@ 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> 
Copier après la connexion
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!