js 焦点事件

最新推荐文章于 2024-04-19 05:51:19 发布
最新推荐文章于 2024-04-19 05:51:19 发布
阅读量1.5w 收藏 10
点赞数 3
分类专栏： js2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85932866
版权

焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点

1 点击

2 tab

3 js

不是所有元素都能够接收焦点，能够相应用户操作的元素才有焦点

onfocus:当元素获取到焦点的时候触发

onblur：当元素失去焦点的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oText = document.getElementById('text1');
                oText.onfocus = function(){
                    if(this.value == '请输入内容'){
                        this.value = '';
                    }
                }
                oText.onblur = function(){
                    if(this.value == ''){
                        this.value = '请输入内容';
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="text1" value="请输入内容" />
    </body>
</html>

obj.focus() 给指定的元素设置焦点

obj.blur() 取消指定的元素焦点

obj.select() 选择制定元素里面的文本内容（注意：选中的是可交互性的文本内容，如input）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="{CHARSET}">
        <title></title>
        <script>
            window.onload = function(){
                var oText = document.getElementById('text1');
                oText.onfocus = function(){
                    if(this.value == '请输入内容'){
                        this.value = '';
                    }
                }
                oText.onblur = function(){
                    if(this.value == ''){
                        this.value = '请输入内容';
                    }
                }
                oText.focus();
                var oBtn = document.getElementById('btn');
                oBtn.onclick = function(){
                    oText.select();
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="text1" value="请输入内容" />
       <input type="button" id="btn" value="全选" />
    </body>
</html>

 

 

 

 

 

我的奋斗ing
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件处理
牧野枫凉的博客
09-08 250
1.对于页面上的一幅图片，鼠标悬停在图片上时切换成另一幅图，鼠标离开时，还原成原来的图片。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>7-1</title> </head> <body> <center...
js 文本框焦点事件
zhdrfirst的专栏
07-25 5174
Javascript：文本框焦点事件http://hi.baidu.com/tina_yebo/blog/item/244c05089d0018d463d98655.html/cmtid/9d2b80012af3d9d8277fb5daJS失去焦点事件http://blog.cs
js焦点事件
m0_51281306的博客
11-09 4356
这两个事件均不支持事件冒泡。 获得焦点事件：onfocus 失去焦点事件：onblur onchange: 元素发生变化的时候， 就会触发。 oninput: 当给元素输入内容的时候， 就会触发。 onchange:当失去焦点的时候才会触发此事件。 oninput:当输入内容的时候，会立即触发。 ...
Web前端-JavaScript
weixin_46051964的博客
09-12 3041
JavaScript是一种脚本语言，缩写为JSHTML是主体。CSS是用来修饰HIML的。JS是用来操作HTML和CSS的,修改HTML中的元素,修改CSS样式,达到网页的动态效果。
前端提高篇(九十五)：jQuery事件：焦点、滚轮、取消默认等事件
最新发布
2401_84140112的博客
04-19 831
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。当我输入’q’时，keydown返回q的键值，与Q的ASCII码值一致；另：如果获得焦点时没有指明字体颜色，只有失去焦点时指明字体颜色，下一次输入文字时，字体颜色是黑色的。
JS获取焦点和失去焦点事件
x3895的博客
10-08 6046
下面是代码，大家可以看一下。 这边是运行效果 没点击input标签前（获取焦点之前） 获取焦点后效果 失去焦点后效果
focus 获取焦点， blur 失去焦点 事件 javascript 写法
qq_70020706的博客
11-29 1129
focus 获取焦点， blur 失去焦点 事件 javascript 写法
解决Js先触发失去焦点事件再执行点击事件的问题
10-18
今天小编就为大家分享一篇解决Js先触发失去焦点事件再执行点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
10-22
主要介绍了JavaScript焦点事件、鼠标事件和滚轮事件使用详解,通过示例给大家讲解的非常细致，有需要的小伙伴可以参考下。
js 浏览器事件介绍
01-19
浏览器事件 浏览器事件指载入文档直到该文档被关闭期间的浏览器事件，如浏览器载入文档事件onload、关闭该文档事件onunload、浏览器失去焦点事件onblur、获得焦点事件onfocus 等。 先考察如下的代码： 代码如下: //...
JavaScript事件类型中焦点、鼠标和滚轮事件详解
10-22
主要为大家详细介绍了JavaScript事件类型中焦点、鼠标和滚轮事件，以及注意事项，感兴趣的小伙伴们可以参考一下
如何改变<input type=”text" >输入框内的值
菜鸟史
12-25 7911
请输入第一个数 type="text" id="first">   请输入第二个数 type="text" id="second">   计算结果 type="text" id="get_result">   -->   type="button" value="+" id="add" onclick="check(
JS焦点事件
m0_74577714的博客
09-19 1178
onfocus和onblur
JS中onblur总结
qq_30359369的博客
08-05 7157
JS中onblur总结 #第一种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"id="...
20-JavaScript焦点事件
记录java学习日常~
05-23 817
JS 焦点事件是针对 DOM 元素而言的，在 web 开发中控制焦点是一件非常普通但又非常重要的事情。当用户与页面交互时，焦点经常根据用户的行为进行切换，例如，当用户点击文本框时，焦点会自动切换到该文本框上。
JavaScript的聚焦：focus/blur
爱蹦跶的全栈大A阿
02-11 1681
focus和blur事件是用于检测元素是否获得或失去焦点的重要事件。它们可以用于各种目的，例如验证表单输入、控制元素的可见性等等。希望本文对你有所帮助！阅读 HTML 和 JavaScript 文档，以了解更多关于focus和blur事件的信息。练习使用focus和blur事件来实现不同的功能。在实际项目中使用focus和blur事件。祝你学习愉快！​。
JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）
热门推荐
吴声子夜歌的博客
09-27 7万+
焦点处理 焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。 获取焦点：focus 当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘ 示例：在页面加载完毕后，将焦点转移到表单中的第...
JS焦点事件和事件冒泡
heartToSky的博客
02-17 1593
焦点事件 JS中focus事件获得焦点，blur失去焦点，这些事件默认情况下只有表单可以触发，如果想让div等元素触发需要加tabindex属性 <div class="list" :class="{change:isclick}" @blur="listBlur" tabindex="-1"> 当属性值为其他时候可以像其他表单一样用tab键切换，当属性值为-1时不能用tab切换 blur和focus不能事件冒泡 事件冒泡 事件冒泡是 ...
js失去焦点事件
05-26
在JavaScript中，当一个元素失去焦点时，就会触发失去焦点事件。你可以使用addEventListener方法来添加失去焦点事件监听器，例如： ```javascript const inputElement = document.querySelector('input'); input...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值