js焦点事件

这两个事件均不支持事件冒泡。获得焦点事件：onfocus失去焦点事件：onbluronchange: 元素发生变化的时候，就会触发。oninput: 当给元素输入内容的时候，就会触发。onchange:当失去焦点的时候才会触发此事件。 oninput:当输入内容的时候，会立即触发。...

名师点津

4278人浏览 · 2021-11-09 21:29:01

名师点津 · 2021-11-09 21:29:01 发布

这两个事件均不支持事件冒泡。

获得焦点事件：onfocus

失去焦点事件：onblur

onchange: 元素发生变化的时候，就会触发。

oninput: 当给元素输入内容的时候，就会触发。

onchange:当失去焦点的时候才会触发此事件。 oninput:当输入内容的时候，会立即触发。

案例：京东搜索框，默认是“手机”两个字，当用户点击搜索框的时候，“手机”两个字消失，当输入文本之后，保持文本内容不变

分析：

如果获得焦点，判断里面是否是默认文字，如果是默认文字，就清空表单内容
如果失去焦点，判断表单是否为空，如果为空，则表单内容改为默认文字
获得焦点的时候，把文本框里的文字变黑
失去焦点的时候，文本框文字变浅

<input type="text" value="手机">
<script>
var input = document.querySelector('input');
input.onfocus = function () {
    if (this.value === '手机') {
    	input.value = '';
    }
    this.style.color = '#3c3c3c'; 
}
input.onblur = function () {
    if (this.value === '') {
    	input.value = '手机';
    }
    this.style.color = '#999';
}
</script>

案例：密码提示框，选中的时候提示密码的长度和标准，失去焦点的时候，检查密码是否合乎规范

分析：

如果获得焦点，提示密码的长度和标准
如果失去焦点，检查密码是否合乎规范，如果不符合规范，就提示
因为改变的样式比较多，所以用className来修改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 600px;
        margin: 100px auto;
    }
    .message {
        display: inline-block;
        font-size: 12px;
        color: #999;
        background: url(images/message.png) no-repeat left center;
        background-size: 16px;
        padding-left: 20px;
    }
    .error {
        display: inline-block;
        font-size: 12px;
        color: red;
        background: url(images/error.png) no-repeat left center;
        background-size: 16px;
        padding-left: 20px;
    }
    .right {
        display: inline-block;
        font-size: 12px;
        color: green;
        background: url(images/right.png) no-repeat left center;
        background-size: 16px;
        padding-left: 20px;
    }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="pwd">
        <p class="message">请输入6~16位密码</p>
    </div>
    <script>
    var pwd = document.querySelector('.pwd');
    var message = document.querySelector('.message');
    pwd.onblur = function() {
        if (pwd.value.length > 16 || pwd.value.length < 6) {
            
            message.className = 'error';
            message.innerHTML = '您输入的位数不对，要求6~16位';
        } else {
            message.className = 'right';
            message.innerHTML = '对辽~';
        }
    }
    </script>
</body>
</html>