<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
font-style: inherit;
}
</style>
</head>
<body>
<div>
<input type="text" value="邮箱/ID/手机号" id="ipt"> <input type="text" value="密码" id="pwd"> <button>登录</button>
</div>
<script>
//世纪佳缘登录效果
//登录框格式没有设计好，不好看。
// 1.获取元素
var ipt = document.getElementById('ipt');
var pwd = document.getElementById('pwd');
//2.注册事件 添加处理程序
ipt.onfocus = function(){ //得到事件焦点
if(this.value == '邮箱/ID/手机号'){
this.value = '';
}
}
ipt.onblur = function(){ // 失去事件焦点
if(this.value == ''){
this.value = '邮箱/ID/手机号';
}
}
pwd.onfocus = function(){
if(this.value == '密码'){
this.value = '';
this.style.borderColor = 'red';
}
}
pwd.onblur = function(){
if(this.value == ''){
this.value = '密码';
this.style.borderColor = '';
}
}
</script>
</body>
</html>
版权声明：本文为ygdwb原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。