change

当元素发生更改时，则会触发 change 事件。

对于输入框，它会在失去焦点时判断一下 value ，如果发生了改变则触发 change 事件。

$$tip

随便点一下非输入框的位置，可使输入框失去焦点。

<input id="input" type="text" placeholder="输入测试一下" />
<script>
    input.onchange = function (event) {
        alert("change 触发")
    }
</script>

$$demo

<input id="input" type="text" placeholder="输入测试一下" /> <script> input.onchange = function (event) { alert("change 触发") } </script>

input

只要用户输入，就会触发 input 事件。

<input type="text" id="input" placeholder="输入测试一下"/> result: <span id="result"></span>
<script>
    input.oninput = function () {
        result.textContent = this.value
    }
</script>

$$demo

<input type="text" id="input" placeholder="输入测试一下"/> result: <span id="result"></span> <script> input.oninput = function () { result.textContent = this.value } </script>

cut、copy、paste

cut、copy、paste 分别对应着剪切、复制、粘贴事件。

$$tip

ClipboardEvent.clipboardData 中保存着剪贴板的数据。

<input type="text" id="input" placeholder="剪切、复制、粘贴测试一下"/>
<script>
    input.oncopy = function () {
        alert("复制")
    }

    input.oncut = function () {
        alert("剪切")
    }

    input.onpaste = function () {
        console.log(event.clipboardData)

        // 打印粘贴板中的文本
        alert(`粘贴：${event.clipboardData.getData("text/plain")}`)
    }
</script>

$$demo

<input type="text" id="input" placeholder="剪切、复制、粘贴测试一下”/> <script> input.oncopy = function () { alert("复制") }

input.oncut = function () {
    alert("剪切")
}

input.onpaste = function () {
    console.log(event.clipboardData)

    // 打印粘贴板中的文本
    alert(`粘贴：${event.clipboardData.getData("text/plain")}`)
}

</script>

focus、blur 事件

当元素获得焦点时会触发 focus 事件，当元素失去焦点时，则会触发 blur 事件。

<input id="input" type="text" placeholder="输入测试一下" />
<textarea id="out" rows="10"></textarea>
<script>
    input.onfocus = function (event) {
        out.textContent += `focus 触发\n`
        out.scrollTop = out.scrollHeight
    }

    input.onblur = function (event) {
        out.textContent += `blur 触发\n`
        out.scrollTop = out.scrollHeight
    }
</script>
<style>
    #input {
        width: 100%;
        margin-bottom: 20px;
        padding: 10px;
    }

    #out {
        width: 100%;
    }
</style>

$$demo

<input id="input" type="text" placeholder="输入测试一下" /> <textarea id="out" rows="10"></textarea> <script> input.onfocus = function (event) { out.textContent += focus 触发\n out.scrollTop = out.scrollHeight }

input.onblur = function (event) {
    out.textContent += `blur 触发\n`
    out.scrollTop = out.scrollHeight
}

</script> <style> #input { width: 100%; margin-bottom: 20px; padding: 10px; }

#out {
    width: 100%;
}

</style>

focus、blur 方法

与之相对的，元素有着 focus 、 blur 方法，可以控制元素获得焦点或失去焦点。

<input id="input" type="text" placeholder="输入 lose 失去焦点" />
<button id="get">获得焦点</button>
<script>
    get.onclick = function () {
        input.focus()
    }

    input.oninput = function () {
        if (this.value === "lose") {
            this.blur()
        }
    }
</script>

$$demo

<input id="input" type="text" placeholder="输入 lose 失去焦点" /> <button id="get">获得焦点</button> <script> get.onclick = function () { input.focus() }

input.oninput = function () {
    if (this.value === "lose") {
        this.blur()
    }
}

</script>

练习

实现以下的实例效果，当输入超过 5 个字符后输入框变红且显示提示语。 $$demo <input class="username" type="text" placeholder="请输入用户名" /> <span class="prompt" hidden>最多输入 5 个字符。</span> <script> document.querySelector(".username").oninput = function (event) { if (event.target.value.length > 5) { this.classList.add("warning") document.querySelector(".prompt").hidden = false } else { this.classList.remove("warning") document.querySelector(".prompt").hidden = true } } </script> <style> .username { padding: 10px;
```
 border: none;

 outline: 2px #bbb solid;

 border-radius: 4px;
```
}

.username:focus { outline: 2px #666 solid; }

.username.warning { outline: 2px red solid; } </style>

$$ $$answer

$$jsdemo$$
$$edit$$
<input class="username" type="text" placeholder="请输入用户名" />
<span class="prompt" hidden>最多输入 5 个字符。</span>
<script>
    document.querySelector(".username").oninput = function (event) {
        if (event.target.value.length > 5) {
            this.classList.add("warning")
            document.querySelector(".prompt").hidden = false
        } else {
            this.classList.remove("warning")
            document.querySelector(".prompt").hidden = true
        }
    }
</script>
<style>
    .username {
        padding: 10px;

        border: none;

        outline: 2px #bbb solid;

        border-radius: 4px;
    }

    .username:focus {
        outline: 2px #666 solid;
    }

    .username.warning {
        outline: 2px red solid;
    }
</style>

完成以下实例，试试在用户输入框与密码输入框按下回车的效果。

$$tip 元素有个 click 方法可以达到点击行为，同时触发 click 事件。 $$ $$demo <input id="username" type="text" placeholder="请输入用户名" /> <input id="password" type="password" placeholder="请输入密码" /> <button id="login">登录</button> <script> username.onkeydown = function (event) { if (event.code === "Enter" || event.code === "NumpadEnter") { password.focus() } }

password.onkeydown = function (event) {
    if (event.code === "Enter"  || event.code === "NumpadEnter") {
        login.click()
    }
}

login.onclick = function (event) {
    alert("登录成功")
}

username.focus()

</script> $$

$$answer

<input id="username" type="text" placeholder="请输入用户名" />
<input id="password" type="password" placeholder="请输入密码" />
<button id="login">登录</button>
<script>
    username.onkeydown = function (event) {
        if (event.code === "Enter"  || event.code === "NumpadEnter") {
            password.focus()
        }
    }

    password.onkeydown = function (event) {
        if (event.code === "Enter"  || event.code === "NumpadEnter") {
            login.click()
        }
    }

    login.onclick = function (event) {
        alert("登录成功")
    }

    username.focus()
</script>