这样效果对吗？老师
<head lang="en">
<meta charset="UTF-8">
<title>onblur和onfocus</title>
<style type="text/css">
.fixe{
outline:none;
border:1px solid rgb(68, 68, 228);
}
.fixe1{
border:1px solid red;
}
</style>
</head>
<body>
姓名：
<input type="text" id='text'><span id='span'></span>
<script>
var text = document.getElementById('text');
var span = document.getElementById('span');
text.onfocus = function () {
if (text.value.length == 0) {
span.innerText = '请输入您的姓名';
text.className='fixe';
}
}
text.onblur = function () {
if (text.value.length > 0) {
span.innerText = '';
text.style.border='1px solid #ccc';
} else if (text.value.length == 0) {
span.innerText = '用户名不能为空';
text.className='fixe1';
}
}
</script>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，代码实现效果有点问题：当输入框输入内容，并失去焦点后，然后将输入框内容删除，再失去焦点，此时输入框内容为空，提示“用户名不能为空”，但边框颜色没有变为红色，如图所示：
原因：当输入框输入内容，并失去焦点时，执行了代码text.style.border = '1px solid #ccc';将边框属性以内联样式写在了input标签中；当将输入框内容删除变为空时，虽然会执行代码text.className = 'fixe1';给input标签设置红色边框，但是这段代码是以内部样式的方式设置的，其优先级要小于内联样式，所以边框颜色不会改变，如图
建议：以内联的方式给input标签设置红色边框，参考如下
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星