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>

表单最初的样子:

获取焦点之后的效果图:

失去焦点之后的效果图:

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

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

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问