首页
学习
活动
专区
圈层
工具
发布

input获取焦点 原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发,个人感觉可以用于注册时的确认密码。...4.onkeydown 按下按键时的事件触发, 5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件–相当于一个按键,两个事件,没怎么用过 6.onclick...当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input的属性里,例如: 1 , 可以通过js给input...dom元素添加相应的事件, 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

28.8K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WPF 获取全局所有窗口的创建显示事件 监控窗口打开

    本文将告诉大家如何在 WPF 里面进行全局监控任意的窗口创建显示打开,可以获取到每个 WPF 窗口的打开的时机。...如此可以用来辅助定位问题和输出日志 这篇博客是有背景的,老司机告诉我说他的应用不响应鼠标和键盘点击了,于是我和他调查了半天才发现有一个 Dialog 窗口显示出来,导致消息循环被切到了一个 Dialog...于是我就在自己的应用上写了一个逗比代码,强行弹出一个 Dialog 窗口出来,结果我就发现监控模块告诉了我有一个在白名单之外的窗口弹出了,如果确定这是符合开发预期的,那就需要手动修改白名单。...于是就可以进行监控窗口创建显示 监听窗口的 SizeChangedEvent 路由事件是比较靠谱的方式,这个有一点点违反开发者的想法,开发者默认想的是使用 LoadedEvent 事件。...也可以在事件里面对每个窗口注入一些有趣的逻辑,或者是监听窗口的各个事件,输出更多日志,让开发者可以通过日志了解到当前有哪些窗口依然还在显示 这是另一位大佬写的代码,请看 https://gist.github.com

    2.6K50

    用python调用selenium获取浏览器新窗口的 cookie 信息

    Cookie 有两种类型:第一方 Cookie 是由您访问过的网站创建的,第三方 Cookie 是由其他网站创建的。...一般情况下可能需要获取浏览器点击弹出新窗口的 Cookie 信息的场景有:在新窗口中保持与原窗口相同的用户状态和数据。分析或测试新窗口中的第三方 Cookie,例如广告或图片等。...当使用Python调用Selenium库时,你可以通过以下步骤来获取浏览器点击弹出新窗口的Cookie信息:1、首先,确保你已经安装了Selenium库。...4、打开网页,点击弹出新窗口的元素:driver.get('https://example.com') # 将URL替换为你要访问的网页# 在此处执行点击弹出新窗口的操作,例如点击按钮或链接5、切换到新打开的窗口...7、关闭浏览器:driver.quit()这是一个使用Selenium库的Python示例代码,用于获取浏览器点击弹出新窗口的Cookie信息。

    3.1K50

    跨浏览器获取不同环境的window窗口宽度和高度

    窗口大小 跨浏览器确定一个窗口的大小不是一件容易的事。...在IE9+、Safari和Firefox中,outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访问)。...在Chrome中, outerWidth 、 outerHeight 与 innerWidth 、 innerHeight 返回的值相同,即视口(viewport)大小而非浏览器窗口大小。...IE8及更早版本没有提供取得当前浏览器窗口尺寸的属性,不过它通过DOM提供了页面可见区域的相关信息。...虽然最终无法确定浏览器窗口本身的大小,但可以取得页面视口的大小,代码如下: var pageWidth = window.innerWidth,      pageHeight = window.innerHeight

    3.4K10

    如何获取 HTML 元素相对于浏览器窗口的位置?

    大家好,今天我们来聊一聊前端开发中一个常见但又非常实用的小技巧:如何获取 HTML 元素相对于浏览器窗口的位置。...不管你是新手还是有经验的开发者,这个技巧在处理布局调整、动画效果或滚动事件时都能派上大用场。接下来,我们一起来看看几种获取元素位置的方法吧!...例如,假设我们有以下 HTML 代码: 你好,世界 我们可以通过以下 JavaScript 代码获取这个 div 元素的位置: const div = document.querySelector...这些技巧不仅在日常开发中非常有用,还能帮助你更好地处理各种复杂的布局和交互需求。 如果你觉得这篇文章对你有帮助,记得点赞、收藏,并分享给更多的小伙伴哦!...有什么问题或者好的建议,欢迎在评论区留言讨论,我们下期再见!

    1.1K10

    JavaScript学习总结(六)

    在浏览器对象模型中,把浏览器的各个部分都用了一个对象进行描述,如果我们要操作浏览器的一些属性,就可以通过浏览器对象模型的对象进行操作 下面我们来介绍一下浏览器对象模型的基本的对象: window 代表了一个新开的窗口...screen 代表了整个屏幕的对象 window对象常用的方法 //open() 打开一个新的窗口(参数一:打开的地址,参数二:是否为新的浏览器窗口,参数三:新窗口属性,参数四:用来替代的地址)...(100,0);//谷歌浏览器貌似不支持了 //moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。...焦点相关的: onblur 在对象失去输入焦点时触发。 onfocus 当对象获得焦点时触发。 其他: onchange 当对象或选中区的内容改变时触发。...有两个比较常用的东西: //href : 设置以及获取地址栏的对象 location.href = "http://www.baidu.com";//每天总在莫名其妙的给百度打广告。。

    91120

    前端入门6-JavaScript客户端api&jQuery

    比如:调用浏览器弹框、定时器的使用、获取窗口信息包括窗口宽高,屏幕宽高等等、窗口的滑动、操纵浏览器窗口的历史记录、向其他窗口发送消息等等。...document 获取次窗口关联的Document对象 history 访问浏览器历史 location 获取当前文档地址的详细信息 与窗口交互: blur() 让窗口失去键盘焦点 close() 关闭窗口...(不是所有浏览器都允许js关闭窗口) focus() 让窗口获得键盘焦点 scrollBy(x, y) 让文档相对于当前位置进行滚动 scrollTo(x, y) 滚动到指定位置 alert(msg)...ctrlKey 事件触发时是否有点击ctrl键 键盘焦点事件 blur 在元素失去焦点时触发 focus 在元素获得焦点时触发 focusin 在元素即将获得焦点时触发 focusout 在元素即将失去焦点时触发...键盘焦点事件传入的是 FocusEvent 对象。

    6.5K40

    Page Lifecycle API 教程

    有了这个 API,开发者就可以预测网页下一步的状态,从而进行各种针对性的处理。Chrome 68 支持这个 API,对于老式浏览器可以使用谷歌开发的兼容库 PageLifecycle.js。...(2)Passive 阶段 在 Passive 阶段,网页可见,但没有输入焦点,无法接受输入。UI 更新(比如动画)仍然在执行。该阶段只可能发生在桌面同时有多个窗口的情况。...这时,有可能是全新的页面加载,也可能是从缓存中获取的页面。如果是从缓存中获取,则该事件对象的event.persisted属性为true,否则为false。...它的前提是浏览器的 History 记录必须发生变化,跟网页是否可见无关。 如果浏览器能够将当前页面添加到缓存以供稍后重用,则事件对象的event.persisted属性为true。 如果为true。...如果后来用户再次点击该选项卡,浏览器会重新加载该页面。 这时,开发者可以通过判断document.wasDiscarded属性,了解先前的网页是否被丢弃了。

    96120

    网页的生命周期API

    有了这个 API,开发者就可以预测网页下一步的状态,从而进行各种针对性的处理。Chrome 68 支持这个 API,对于老式浏览器可以使用谷歌开发的兼容库 PageLifecycle.js。...(2)Passive 阶段 在 Passive 阶段,网页可见,但没有输入焦点,无法接受输入。UI 更新(比如动画)仍然在执行。该阶段只可能发生在桌面同时有多个窗口的情况。...这时,有可能是全新的页面加载,也可能是从缓存中获取的页面。如果是从缓存中获取,则该事件对象的event.persisted属性为true,否则为false。...它的前提是浏览器的 History 记录必须发生变化,跟网页是否可见无关。 如果浏览器能够将当前页面添加到缓存以供稍后重用,则事件对象的event.persisted属性为true。 如果为true。...如果后来用户再次点击该选项卡,浏览器会重新加载该页面。 这时,开发者可以通过判断document.wasDiscarded属性,了解先前的网页是否被丢弃了。

    1.1K10

    electron 模块BrowserWindow

    模块BrowserWindow BrowserWindow模块是用于创建和管理图形用户界面的窗口。它提供了一种在桌面应用程序中创建原生窗口的方式,类似于浏览器中的窗口。...focus: 当窗口获取焦点时触发此事件。 blur: 当窗口失去焦点时触发此事件。 enter-full-screen: 当窗口进入全屏模式时触发此事件。...BrowserWindow 模块的常见的实例方法有好几十个,这里只是列出几个,更多的可以查看文档。...,它的角色和功能比较类似于我们在浏览器中的 BOM 对象,用于控制窗口中加载的网页内容和与之进行交互。...getTitle() 获取窗口中当前加载的网页的标题。 getURL() 获取窗口当前加载的网页的 URL。 isLoading() 检查窗口中是否正在加载网页。

    78110

    Window对象

    frames: 返回一个类数组对象,列出了当前窗口的所有直接子窗口。 fullScreen: 这个属性表明了窗口是否处于全屏模式下。 history: 提供了操作浏览器会话历史的接口。...confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。 focus(): 把焦点给予一个窗口。 getComputedStyle(): 获取指定元素的CSS样式。...stop(): 停止页面载入,相当于点击了浏览器的停止按钮。 Window对象事件 加载相关 onbeforeunload: 该事件在即将离开页面(刷新或关闭)时触发。...onabort: 发送到window的中止abort事件的事件处理程序,不适用于Firefox 2或Safari。 窗口相关 onblur: 窗口失去焦点时触发。...onfocus: 窗口获得焦点时触发。 onresize: 窗口大小发生改变时触发。 onscroll: 窗口发生滚动时触发。 onmessage: 窗口对象接收消息事件时触发。

    3K20

    再谈BOM和DOM(7):HTML DOM Event 对象属性及DOM事件详细列表

    metaKey 返回当事件被触发时,"meta" 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时,鼠标指针的水平坐标。...screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。...<select, 和 <textarea) 2 onfocus 元素获取焦点时触发 2 onfocusin 元素即将获取焦点时触发 2 onfocusout 元素即将失去焦点时触发 2 oninput...onseeking 事件在用户开始重新定位视频/音频(audio/video)时触发。 onstalled 事件在浏览器获取媒体数据,但媒体数据不可用时触发。...onpopstate 该事件在窗口的浏览历史(history 对象)发生改变时触发。

    2.6K40

    10步大幅提升网站可访问性

    虽然HTML5允许heading之间的嵌套,但是我绝对不推荐。 [图片] 第五步,是否有blur()。辅助技术一般都是依靠焦点来获取内容,所以这个事件从本质上就使得辅助内容无法获得应用了此方法的元素。...另外聚焦的事件不要单单依赖浏览器本身,请使用js或者相应的键盘事件,然后聚焦给相应的元素。 第九步,触发界面转换需设置焦点。...比如,点击一个按钮,弹出了一个模态或者非模态的弹窗(不是浏览器弹窗),利用js把焦点移动到这个窗口的第一个有内容的DOM上;再比如,点击“返回首页”按钮,如果仅仅是链接的是#或者改变类似scrollTop...的值,那么也一定利用js将焦点移动到这个页面的第一个有内容的DOM上。...如果你通过一个按钮触发了一个组件窗口,在关闭这个组件窗口的时候,请把焦点重新移动回到触发这个窗口的按钮上。 第十步,填写一个简单的链接到之后,作为第一个内容元素。

    1.1K21
    领券