首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素 案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

当 DOM 元素 获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素 一般都是 input 表单元素 ; 如 : 当 用户 点击输入框 或 通过键盘切换到输入框时..., 该事件会被触发 ; 绑定 onfocus 事件的方法 : 设置 onfocus 属性 : 可以 通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上时要执行的JavaScript...- onblur 事件 在 JavaScript 中 , 当 DOM 元素 失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从 输入框 移动到 页面的其他部分 或...按下 Tab 键 移动 焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的...注册 获得焦点 事件 onfocus text.onfocus = function() { // 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容

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

    C语言练习之用函数完成数组元素的逆

    前言 最近学习数组的基本内容的过程中进行的习题练习,分享出来供大家一起学习交流: 将数组的元素逆序打印。...一、思路 实现print()  函数打印数组的每个元素 实现reverse()  函数完成数组元素的逆。 打印每个元素(print): 用for循环将数组中的元素一个一个的打印出来。...元素的逆(reverse): 设置left为左下标,right为右下标,temp为交换两个数内容的中间变量 先将下标为left的值赋值给temp,再将下标为right的值赋值给下标为元素left,最后再将...源代码: #define _CRT_SECURE_NO_WARNINGS //实现print() 打印数组的每个元素 //实现reverse() 函数完成数组元素的逆。...sz); my_reverse(arr,sz); print(arr, sz); return 0; } 运行截图: ---- 总结 以上就是今天要讲的内容,本文简单的介绍了用C语言对数组内元素进行逆并且打印出来的思路

    51720

    如何追踪 WPF 程序中当前获得键盘焦点元素并显示出来

    我们有很多的调试工具可以帮助我们查看 WPF 窗口中当前获得键盘焦点元素。本文介绍监控当前键盘焦点元素的方法,并且提供一个不需要任何调试工具的自己绘制键盘焦点元素的方法。...在打开实时可视化树后,我们可以略微认识一下这里的几个常用按钮: 这里,我们需要打开两个按钮: 为当前选中的元素显示外框 追踪具有焦点元素 这样,只要你的应用程序当前获得焦点元素发生了变化,就会有一个表示这个元素所在位置和边距的叠加层显示在窗口之上...使用代码查看当前获得键盘焦点元素 我们打算在代码中编写追踪焦点的逻辑。...实时刷新 Keyboard 有路由事件可以监听,得知元素已获得键盘焦点。...绘制并实时显示 WPF 程序中当前键盘焦点元素 如果我们需要监听应用程序中所有窗口中的当前获得键盘焦点元素怎么办呢?我们需要给所有当前激活的窗口监听 GotKeyboardFocus 事件。

    49440

    如何在网页灰的时候,部分元素保持彩色-有意思的面试题

    网页灰方案讨论如何在网页灰的前提下,保持部分元素彩色在线体验本文视频版链接最近哀悼日,网页端如何一键变灰已经有很多实现方式了,但是我看到一个推文很有意思,是一个不错的面试题现在网页灰已经不仅仅是一行...css的事了,如何在网页灰的前提下,部分元素保持彩色,这是一个不错的system design题一键变灰这个大部分同学都写了,直接html{ filter: grayscale(100%);}考虑...我们还可以继续用filter这个方法,图片图片我们设置有一些选择器保持彩色,然后统计出当前这个网页中,需要灰的元素,网页是一个属性结果,我们先对选中元素的父元素进行遍历标记图片let body =...parent.colorful){ parent.colorful = true parent = parent.parentNode } })})然后现在需要灰的元素都已经标记了...colorful,然后我们遍历一下,递归每个child,如果没有colorful,直接灰返回,通过递归就可以把所有元素灰了let graySelector = 'gray-filter'walk(

    83330

    移动端问题收集和解决

    tap击穿问题 问题描述 绑定tap方法的dom元素,触发该方法时,该dom元素下方同一位的dom元素会触发click事件或者有浏览器认为可以被点击交互的dom元素(input的focus事件)...{ callback(event); }) } } position: fixed + input输入框问题 问题描述 IOS下,当input输入框获取焦点...textarea底展示问题 问题描述 ios中的输入唤起键盘后,整个页面会被键盘压缩,也就是说页面的高度变小,并且所有的fixed全部变为了absolute。键盘会将页面顶上去。...那么如果希望可以将输入框和键盘完全贴合,我们可以使用div模拟一个假的输入框,使用定位将真正的输入框隐藏掉,当点击假的输入框的时候,将真正的输入框定位到键盘上方,并且手动获取输入框焦点。...当删除文字的时候需要height也有变化,因此每次input都先将height0,然后再赋值。

    1.9K20

    你的设计作品!缺少视觉引导吗?

    也就是说我们在阅读画面时、首先会把注意力放在视觉的焦点上,然后顺着阅读的方向与角度的倾斜来发现视线的进程。 ?...在设计的处理上,表现在以强烈的形象与文字独自占据画面的视觉焦点,从而使平面广告设计的主题更为突出;另外在画面中文字、图形的聚散强烈比关系和特异的构成都会引起人们的关注,成为视觉的焦点;其次视觉的向心,离心的运动也是焦点视觉引导的具体表现...当反映画面主题的图形和文字居于几何中心时,画面上下左右空间对称,视觉张力均等,表现为既庄重又呆板;当居于视觉的焦点时,有视觉心理的平衡和舒适感;当偏左或偏右时,产生向心的移动趋势过于边,也产生离心的运动感...;当上下边时,有上升或下沉的心理的感受。...直线视觉顺序是画面中有直线方向的视觉元素做视线引导、引领观者的注意,以达到宣传目的;曲线视觉顺序利用元素的弧度就行强制视觉引导;反复视觉顺序则是利用反复出现的元素强化视觉重点。 ?

    1.4K10

    第99天:CSS3中透视perspective

    perspectiveOrigin: 个人理解为视点的xy坐标,perspective则是z坐标,三者可以再三维中确定 视点的唯一位。 浏览器透视原理图 ?...当元素向后移动的时候,透视点与元素所处位置的连线和屏幕的焦点,就是元素在屏幕上的投影。与原来的头像大小相比变小了。 ?...与之前的过程相同,视点与移动后的元素的连线与屏幕的焦点就是在屏幕上的呈现的元素的大小,与元素相比较变大了。 ?...使用在父元素还是子元素 其中使用 不同元素作为视角对象的过程,就是把perspective属性加在不同的元素上。 仔细观看以舞台作为视角对象时,子元素不仅呈现图像不同,而且还会消失。...原因如下图截取Y=0平面 ,及浏览器的俯视图,视点在浏览器前方,元素现在在Z=0平面上,集成现在浏览器上,视点和元素不同部位的连线,就是我们的视线,当元素中子元素的旋转角度与该视线重合,由于其没有宽度

    1.1K20

    java SWT:TraverseEvent的理解塈添加TraverseListener实现Composite之间TAB键切换焦点

    )动作发生时产生的事件 举例来说,就是当我们使用光标键,TAB/shift-TAB键,PAGE-UP/DOWN等键在按钮(Button)之间切换焦点的时候,就会产生TraverseEvent事件。...widget,这就意味着在Canvas中的按键侦听器(key Listener)将会收到用户敲的TAB键(SWT.TAB)—所以默认情况下,用TAB键是无法在widget之间切换焦点的。...event.doit) return false; //如果有组件将响应TraverseEvent事件并将doit为true,就执行遍历动作。...SWT.TRAVERSE_PAGE_PREVIOUS: return traversePage (false); } return false; } TraverseListener侦听器 如何将doit为...SWT.TRAVERSE_TAB_NEXT: case SWT.TRAVERSE_TAB_PREVIOUS: // TAB/shift-TAB键时将doit

    80710

    JavaScript--DOM总结

    Anchor对象的方法 方法 描述 focus 给链接应用焦点 blur 把焦点从链接上移开 Base对象 Base对象的属性 属性 描述 href 设置或返回针对页面中所有链接的基准 URL id...onblur 元素失去焦点。 onchange 域的内容被改变。 onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。...onfocus 元素获得焦点。 onkeydown 某个键盘按键被按下。 onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。...改变列表项标记的位置 listStyleType 设置列表项标记的类型 Positioning 属性 属性 描述 bottom 设置元素的底边缘距离父元素底边缘的之上或之下的距离 left 元素的左边缘距离父元素左边缘的左边或右边的距离...position 把元素放置在static, relative, absolute 或 fixed 的位置 right 元素的右边缘距离父元素右边缘的左边或右边的距离 top 设置元素的顶边缘距离父元素顶边缘的之上或之下的距离

    6810

    解决Android软键盘弹出覆盖h5页面输入框问题

    h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点...软键盘 覆盖 h5页面中的输入框 问题分析: 1.发现问题:当前页面中box为flex布局,内容为上下固定高,中间自适应(中间区域内容过多会出现滚动条,input框在wrapper的底部),input获取焦点...需重新获取屏幕高度并赋值),并将其赋值到body的height,这样body的高度一直都是屏幕的高度,当软键盘弹出后,会将body向上推(因为body有了固定高度,不会再继承html的自适应高度),使输入框到可视区内...,代码如下: document.body.style.height = window.screen.availHeight +'px'; 方案2 我们可以借助元素的 scrollIntoViewIfNeeded...() 方法,这个方法执行后如果当前元素在可视区中不可见,则会滚动浏览器窗口或容器元素,最终让它可见,如果当前元素在可视区中,这个方法什么也不做,代码如下: window.addEventListener

    5.5K30
    领券