Seperti yang kami nyatakan dalam bahagian sebelumnya, sahkan sama ada kandungan borang itu kosong Jika ia kosong, kami akan memberikan mesej segera
Sekarang mari lihat cara untuk mengalih keluar mesej gesaan apabila memasuki. kandungan dalam kotak teks borang atau medan teks
Pertama sekali, mari kita fikirkan kandungan input dalam kotak teks Ini akan mencetuskan acara papan kekunci.
//Apabila kotak teks nama pengguna mencetuskan acara papan kekunci, segera penyingkiran Maklumat
document.getElementById('name').onkeyup=function(){ document.getElementById('sp' ).innerHTML = " ";
}
//Apabila Kotak kata laluan mencetuskan acara papan kekunci dan maklumat gesaan dialih keluar
document.getElementById('pwd').onkeyup=function(. ){
document.getElementById('sp1').innerHTML = " "; > // Apabila kotak teks peti mel mencetuskan acara papan kekunci, maklumat gesaan mengalih keluar
Document.GetelementByid ('Emel') . Onkeyup = Fungsi () {
Document.GetelementByid ('SP2') = " “; sp3').
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#div{width:410px;height:400px;background:#46a3ff;padding-left:16px;
padding-top:20px;}
input{
outline:none;
box-sizing:border-box;padding-left:15px;}
textarea{
outline:none;resize : none;
box-sizing:border-box;padding-left:15px;padding-top:5px;}
.name{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.pwd{width:200px;height:30px;
margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.email{width:200px;height:30px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.txt{
width:280px;height:70px;margin-left:8px;border:1px solid #ffc1e0;border-radius:8px;}
.sub{width:100px;height:30px;padding-left:0px;
border:none;
border-radius:5px;background:#ffd0ff;}
.sub:hover{background:#ffaad5;}
.div{
width:200px;height:30px;margin:0 auto;box-sizing:border-box;padding-left:45px;padding-top:5px;color:#8600ff;font-weight:bold;}
</style>
</head>
<body>
<div id="div">
<form>
<label>用户名:</label>
<input type="text" class="name" id="name">
<div id="sp" class="div"></div>
<label>密 码:</label>
<input type="password" class="pwd" id="pwd">
<div id="sp1" class="div"></div>
<label>邮 箱:</label>
<input type="text" class="email" id="email">
<div id="sp2" class="div"></div>
<label>爱 好:</label>
<textarea rows="5" cols="40" class="txt" id="txt"></textarea>
<div id="sp3" class="div"></div>
<input type="button" class="sub" value="注册" id="sub">
</form>
</div>
<script type="text/javascript">
var sub = document.getElementById('sub');
sub.onclick=function(){
//验证用户名是否为空,如果为空，给出提示信息
var val = document.getElementById('name').value;
if(val == ""){
document.getElementById("sp").innerHTML = "请输入用户名！";
}
//验证密码是否为空，为空则给出提示信息
var val1 = document.getElementById('pwd').value;
if(val1 == ""){
document.getElementById("sp1").innerHTML = "请输入密码！";
}
//验证邮箱是否为空
var val2 = document.getElementById('email').value;
if(val2 == ""){
document.getElementById("sp2").innerHTML = "请输入邮箱！";
}
//验证内容是否为空
var val3 = document.getElementById('txt').value;
if(val3 == ""){
document.getElementById("sp3").innerHTML = "请输入内容！";
}
}
//当用户名的文本框触发键盘事件，提示信息去除
document.getElementById('name').onkeyup=function(){
document.getElementById('sp').innerHTML = " ";
}
//当密码框触发键盘事件，提示信息去除
document.getElementById('pwd').onkeyup=function(){
document.getElementById('sp1').innerHTML = " ";
}
//当邮箱文本框触发键盘事件，提示信息去除
document.getElementById('email').onkeyup=function(){
document.getElementById('sp2').innerHTML = " ";
}
//当文本域触发键盘事件，提示信息去除
document.getElementById('txt').onkeyup=function(){
document.getElementById('sp3').innerHTML = " ";
}
</script>
</body>
</html>