dom元素主动获取焦点

最新推荐文章于 2022-03-11 19:51:36 发布
最新推荐文章于 2022-03-11 19:51:36 发布
阅读量7k 收藏
点赞数
分类专栏： javascript 文章标签： js angularJs dom focus 聚焦
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AboyL/article/details/78813951
版权

我们知道如果一个元素要获取焦点，我们直接点击一下就好了

但是有的时候我们希望有这个样子的效果

当我们点击一个按钮弹出一个输入框

然后马上把焦点聚焦过去

这个时候我们可以使用

focus函数

( document. getElementsByClassName( "comment-input")[ index]). focus();
比如 这个样子

但是这个样子有一个问题

如果一开始的时候我们的元素是被隐藏了，或者还没有创建

这个时候就是不行的

我们要进行setTime操作

在angularJs下

$timeout( function(){
( document. getElementsByClassName( "comment-input")[ index]). focus();
}, 50);

这样就可以在50毫秒以后进行聚焦了

而我们的comment-input元素就会在这50毫秒里面创建出来，使得我们在50毫秒后聚焦成功


AboyL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端】【JS】前端学习之路（九）：DOM练习（四）（失去&获得焦点事件/tab案例/自定义属性）
SuiKaSan的自学室
06-18 481
1.模拟搜索<input type="text" value="请输入搜索的具体内容" id="btn" style="color: grey;"/><script> //要让搜索框产生焦点的时候为空，失去焦点的时候默认填入“请输入搜索的具体内容” 并且文字为灰色 //产生焦点操作 my$("btn").onfocus = fu
dom-autofocus:进入dom时聚焦一个元素
05-13
自动对焦 进入dom时聚焦一个元素 为什么？ 因为autofocus属性仅在页面加载时起作用。 挂载元素后，此模块立即使用调用.focus() 。 安装 npm install dom-autofocus 用法 dom-autofocus与非虚拟DOM差异库（例如choo）一起使用时效果很好： var autofocus = require ( 'dom-autofocus' ) var html = require ( 'choo/html' ) module . exports = function view ( ) { return html ` < body > Type here: ${ autofocus ( html ` < input type =" text " > ` ) } </ body
DOM 元素中的焦点管理
weixin_34289454的博客
02-17 156
DOM 元素中的焦点管理 1. 焦点元素 表单元素（input、select 或者 textarea 等） 以及 document.body 2. 如何查看当前焦点元素 document.activeElement：返回当前页面中获得焦点的元素，也就是说，如果此时用户按下了键盘上某个键，会在该元素上触发键盘事件。该属性是只读的。 Chro...
DOM 元素如何获得焦点
kopolwu的专栏
12-15 614
<br /><br />首先让我们看看哪些元素可以直接获得焦点（element..focus()）：<br />// Form : http://www.w3.org/TR/html5/editing.html#focusablea elements that have an href attributelink elements that have an href attributebutton elements that are not disabledinput elements whose type
input主动获取焦点
jaqi.csdn
04-27 2680
原生： document.getElementById('input').focus(); vue: this.$nextTick(() => { this.$refs.input.focus() }) uni-app: <input ref="huifu" v-model="content" :focus="focusState" type="text" /> this.focusState = false; this.$nextTick(function() { this.fo
获取ＤＯＭ当前焦点元素
luxiaopengyou的博客
07-27 734
//查询当前焦点元素 document.activeElement //查询ＤＯＭ名称类 document.activeElement．localName
vue获取dom元素注意事项
08-28
vue获取DOM元素注意事项 vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？ 首先，我们需要了解vue的...
Javascript Dom元素获取和添加详解
10-16
DOM元素的获取和添加是前端开发中的基础操作，对于创建交互式网页至关重要。 1. **DOM元素的获取** - `getElementById()`：这个方法通过指定的id值获取唯一匹配的DOM元素。例如，`document.getElementById('myID'...
JQuery 获取Dom元素的实例讲解
10-19
下面小编就为大家带来一篇JQuery 获取Dom元素的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
封装获取dom元素的简单实例
09-02
下面小编就为大家带来一篇封装获取dom元素的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 自动聚焦(autofocus)属性使用介绍
09-28
一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成，感兴趣的朋友可以了解下
Js操作DOM元素及获取浏览器高宽的简单方法
10-21
下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3获取dom获取焦点
九亿宅男的梦的博客
09-04 2036
<divref=“Ref”>获取单个DOM元素</div>Vue 2获取DOM：this.$refs.RefVue 3获取单DOM： <script> import{ref,onMounted}from"vue"; exportdefault{ setup(){ constRef=ref(null); onMounted(()=>{ console.dir(Ref.value...
dom节点 强制获取焦点
weixin_34195546的博客
04-25 624
2019独角兽企业重金招聘Python工程师标准>>> ...
通过jq选择器dom操作获得焦点
ucc的博客
07-20 531
获取焦点     我是不可编辑的         我是配角1     点击我     我是配角2     function edit(a,obj){         var input = $(obj).parent('.set-container').siblings('.word-container').find('input');        
JS：DOM 获取页面元素 js修改样式属性 焦点
qq_44143906的博客
10-20 918
API与WebAPI API：应用程序编程接口，一种工具。 Web API：针对浏览器的API，操作浏览器功能和页面元素。 DOM：文档对象标准模型 ——通过DOM接口改变网页的内容、结构和样式 获取页面元素 1.通过ID获取： getElementById(id)： 返回DOM的元素对象或NULL。 console.dir()：打印返回的元素对象，查看属性和方法。 2.根据标签名获取： getElementsByTagName()：返回带有标签名的对象的集合，以伪数组的形式存放。 还可以指定某个父元素中
Dom核心之——表单聚焦
weixin_30747253的博客
02-19 56
本例实现使打开页面第一个文本框聚焦功能： 1<html>2<head>3<title>LoginPage</title>4<styletype="text/css">5*{6font-family:Tahoma,Arial,serif;7font-...
DOM深入学习 --- 聚焦：focus / blur ，foucs / blur 委托的实现，tabindex中任何元素都可聚焦（六）
秋天，黄叶坠地，凉风有信。
03-11 2587
文章目录聚焦：focus/blurfocus/blur 事件focus/blur 方法允许在任何元素上聚焦：tabindexfocus/blur 委托总结 聚焦：focus/blur 当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行代码以初始化所需功能的时刻。
学习笔记---api02---焦点事件 鼠标事件 获取元素 自定义属性
poppy995的博客
06-22 342
onmouseover 鼠标进入事件 onmouseout 鼠标移除事件 ================================================================== 获取元素 document.getElementsById("node_small").getElementsByTagName("a") [0]; //获取id名为node_smal...
uniapp 获取dom元素
最新发布
03-31
在uniapp中，可以使用以下方法获取dom元素： 1. 使用原生的querySelector方法获取dom元素： ```js let dom = uni.createSelectorQuery().select('#id'); // 通过id获取dom元素 ``` 2. 使用ref属性获取dom元素： ```html <template> <div ref="myDiv"></div> </template> <script> export default { mounted() { let dom = this.$refs.myDiv; // 获取dom元素 } } </script> ``` 3. 使用$nextTick方法获取dom元素： ```html <template> <div ref="myDiv"></div> </template> <script> export default { mounted() { this.$nextTick(() => { let dom = this.$refs.myDiv; // 获取dom元素 }) } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值