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>

表单最初的样子:

获取焦点之后的效果图:

失去焦点之后的效果图:

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

相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
41 3
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
51 6
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
26 5
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
146 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
58 0
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
|
2月前
|
JavaScript 前端开发 Android开发
JavaScript触摸touch事件
JavaScript触摸touch事件
|
2月前
|
JavaScript 前端开发 UED
JavaScript 计时事件
JavaScript 计时事件
17 0