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>

表单最初的样子:

获取焦点之后的效果图:

失去焦点之后的效果图:

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

相关文章
|
23天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
12 0
|
4天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
19 2
|
25天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
21 1
|
1月前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
18 0
|
1月前
|
JavaScript 前端开发
JS页面加载事件
JS页面加载事件
|
1月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
21 3
|
1月前
|
JavaScript
js事件记录(如有更新请留言我去补充)
js事件记录(如有更新请留言我去补充)
|
2月前
|
前端开发 JavaScript
JavaScript 中的事件委托机制详解
【2月更文挑战第2天】本文将深入探讨 JavaScript 中的事件委托机制,介绍其原理、优势以及实际应用场景,帮助读者更好地理解并运用这一重要的前端开发技术。
|
2月前
|
JavaScript 前端开发 UED
JavaScript中的事件委托机制及实践应用
事件委托是JavaScript中常用的性能优化技巧,通过将事件监听器绑定在父元素上,实现对子元素事件的统一管理,减少页面中事件处理函数的数量,提升页面性能。本文将介绍事件委托的原理和实践应用,帮助开发者更好地理解和运用这一技术。
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0