<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框案例</title>
<style>
/* .box {border: 1px solid #000;} */
.pink {
border-color:pink;
border-width: bold;
color: pink;
}
.moren {
border-color:#000;
}
</style>
</head>
<body>
<input type="text" value="邮箱/ID/手机号" class="text">
<script>
// 绑定元素
var text = document.querySelector('.text');
// 注册事件 处理程序
text.onfocus = function() {
if(this.value === '邮箱/ID/手机号') {
this.value = '';
this.className = 'pink';
}
}
text.onblur = function() {
if(this.value === '') {
this.value = '邮箱/ID/手机号';
this.className = 'moren';
}
}
</script>
</body>
</html>
提问:如何改变边框线颜色啊,为什么做出来没边框线反应,(只实现了基本功能。)