JS焦点事件

简介: JS焦点事件

JS中有许多的事件,让我为大家介绍一下焦点事件吧!

基本上都是用在表单上面

本人文笔有限,十分感谢大家的阅读!

1.onfocus(获取焦点事件)

当我们表单获取焦点的时候,我们可以让表单发生改变,可以设置许多的方法

有光标是获取到了焦点

这是有光标:

2.onblur(失去焦点事件)

当我们失去焦点的时候,我们可以让表单发生改变

无光标时是失去焦点

这是无光标:

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点事件</title>
</head>
<body>
    <input type="text">
</body>
<script>
    // 获取input元素
    let input = document.querySelector("input")
    // 给input元素设置获取焦点事件
    input.onfocus = function(){
        //获取焦点之后我想让input的宽高变大
        input.style.width = "200px"
        input.style.height="200px"
    }
    // 我们再设置,当我们失去焦点时,input的宽高变回原来的样子,边框颜色变红色
    input.onblur = function(){
        //失去焦点之后我想让input的宽高变回原来的样子,边框颜色变红色
        input.style.width = null
        input.style.height=null
        input.style.border = "1px solid red"
    }
</script>
</html>

表单最初的样子:

获取焦点之后的效果图:

失去焦点之后的效果图:

感谢大家的阅读!如有什么错误的地方,可以跟我提出,感谢大家!

相关文章
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
275 3
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说,JavaScript事件是JavaScript交互设计的核心,理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
312 15
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
626 3
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
1186 5
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
328 6
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
1274 0
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
215 0
|
JavaScript 前端开发 Android开发
JavaScript触摸touch事件
JavaScript触摸touch事件
|
JavaScript 前端开发 UED
JavaScript 计时事件
JavaScript 计时事件
181 0