<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光标聚焦和失焦事件</title>
<style type="text/css">
.text{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form action="">
<p class="name">
<label for="username">用户名:</label>
<input type="text" name="user" id="username">
</p>
<p class="pwd">
<label for="pwd">密码:</label>
<input type="password" name="wpd" id="pwd">
</p>
<input type="submit" name="">
</form>
<script type="text/javascript">
var userName = document.getElementById('username');
var newNode = document.createElement('span');
userName.onfocus = function(){
newNode.innerHTML = '请输入用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
}
userName.onblur = function(){
newNode.innerHTML = '请输入正确的用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
}
</script>
</body>
</html>
表单控件上的事件
最新推荐文章于 2024-07-23 16:37:55 发布