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

Safari (移动) IOS -单击外部时,输入不会失去焦点

Safari (移动) IOS是苹果公司的移动设备上的默认浏览器。当在Safari浏览器中使用IOS设备时,单击页面的空白区域或其他非输入区域时,输入框不会失去焦点。

这种行为是由Safari浏览器的默认设置决定的,它有助于提高用户体验和操作的便利性。在移动设备上,用户可以通过单击页面的其他区域来浏览页面内容,而不必担心输入框会意外失去焦点,从而导致输入中断或错误。

这种特性在一些特定的场景下非常有用,比如在填写表单或进行搜索时,用户可以随时查看页面的其他部分,而无需频繁点击输入框来切换焦点。这样可以提高用户的效率和舒适度。

对于开发者来说,了解这个特性可以帮助他们更好地设计和开发移动网页应用。在移动网页开发中,可以利用这个特性来提供更好的用户体验,同时避免用户因为输入框失去焦点而感到困惑或不便。

腾讯云提供了一系列与移动开发相关的产品和服务,例如腾讯移动分析、腾讯移动推送、腾讯移动广告等,可以帮助开发者更好地管理和推广移动应用。您可以访问腾讯云官方网站了解更多相关产品和服务的详细信息:腾讯云移动开发产品

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CSS 下拉菜单与 focus

移动端上稍微有些不同,毕竟所有控制——无论单击、长按抑或划动——都由接触开始,也没有鼠标的「悬停」逻辑,为了方便判定,移动端上若想激活 :hover 也是单击(触摸)。...桌面端 移动端 focus 持续到失去焦点 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 active 单击按下期间 触摸按下期间 综合来看,focus 是最合适的。...iOS Safari 出错 是的,iOS Safari 上的这个错误是促成本文最主要的缘故。...其次,当一个元素被聚焦,点击一般的空白处无法使它失焦。这个问题很迷,在 iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。...PC iOS Android focus 持续到失去焦点 默认不可用 松开进入,持续到失去焦点 hover 悬停期间 按下进入,持续到失去焦点 按下进入,持续到失去焦点 active 单击按下期间

5.4K20

移动端问题收集和解决

问题描述 IOS下,当input输入框获取焦点focus,弹起虚拟键盘之后,页面上position: fixed的元素的位置会错乱。...可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。...Safari浏览器input输入框 问题描述 在safari下,input输入框,点击时会有一个默认的小人出现,点击后会自动补充联系人的信息 解决办法 只有将其隐藏 input::-webkit-contacts-auto-fill-button...两者的差值即为键盘的高度,那么定位真输入框自然就很容易了 2、在ios下手动获取焦点不可以用click事件,需要使用tap事件才可以手动触发 $('#fake-input').on($.os.ios...,除了使用失去焦点(blur)方法,还有什么方法可以判断键盘是否收起呢?

1.8K20

接上一篇事件详解

:当元素获得或失去焦点触发; 有:blur:在元素失去焦点触发,这个事件不会冒泡,所有浏览器都支持。...foucs:在元素获得焦点触发,这个事件不会冒泡,所有浏览器都支持。...鼠标事件:当用户通过鼠标在页面操作触发; click事件:在用户单击鼠标按钮或者按下回车键触发; dblclick事件:在用户双击鼠标按钮被触发; mousedown事件:在用户按下了任意鼠标按钮被触发...mouseenter事件:在鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡; mousemove事件:当鼠标指针在元素内部移动重复地触发。...mouseover事件:鼠标指针在元素外部,用户将移入另一个元素的边界触发,感觉和mouseenter事件类似; mouseup事件:用户释放鼠标按钮触发; 页面上所有的元素都支持鼠标事件,除了mouseenter

1.8K60

事件

焦点事件 焦点事件会在页面元素获得或失去焦点触发。...事件 说明 blur 在元素失去焦点触发,不会冒泡 focus 在元素获得焦点触发,不会冒泡 focusin 在元素获得焦点触发,会冒泡 focusout 在元素失去焦点触发,会冒泡 当焦点从页面中的一个元素移动到另一个元素...也可以通过event.relatedTarget来获取对应相关元素(哪个元素失去焦点导致目标元素获得焦点,哪个元素获得焦点导致目标元素失去焦点)。...这个事件并不是DOM2级事件规范中规定的,其得到广泛应用,在DOM3中将其纳入了标准; mousedown 用户按下任意鼠标按钮触发; mouseenter 鼠标光标从元素外部首次移动到元素范围内触发...;这个事件不冒泡,而且在鼠标移动到后代元素上不会触发;DOM3被纳入标准; mouseleave 在位于元素上方的鼠标光标移动到元素范围之外触发;这个事件不冒泡,而且在鼠标移动到后代元素上不会触发;DOM3

3.2K51

浅谈JavaScript的事件(事件类型)

DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互触发;焦点事件,元素获得或失去焦点触发;鼠标事件,用户通过鼠标在页面上执行操作触发;滚轮事件,使用鼠标滚轮触发;文本事件,当在文档中输入文本触发...有6个焦点事件:blur事件,元素失去焦点触发事件,不会冒泡;focus事件,元素获得焦点触发,不会冒泡;focusin事件,元素获得焦点触发,会冒泡;focusout事件,元素失去焦点触发,会冒泡...当用户在页面上由一个元素移动到另一个元素事件触发的顺序为:focusout事件,在失去焦点的元素上触发;focusin事件,在获得焦点的元素上触发;blur事件,在失去焦点的元素上触发;focus事件,...事件,用户光标从元素外部首次移动到元素范围之内触发。...这个事件不冒泡,而且光标在移动到后代元素上不会触发;mouseleave事件,在位于元素上方的事件移动到元素范围之外触发;mousemove事件,鼠标在元素内部移动重复重复;mouseout事件,在鼠标指针位于一个元素上方然后用于将其移入另一个元素触发

1.8K50

JavaScript(十二)

UI(User Interface,用户界面)事件,当用户与页面上的元素交互触发 焦点事件,当元素获得或失去焦点触发 鼠标事件,当用户通过鼠标在页面上执行操作触发 滚轮事件,当使用鼠标滚轮(或类似设备...焦点事件 焦点事件会在页面获得或失去焦点触发。利用这些事件并与 document.hasFocus() 方法及 document.activeElement 属性配合,可以知晓用户在页面上的行踪。...有以下 4 个焦点事件: blur: 在元素失去焦点触发 focus: 在元素获得焦点触发 focusin: 在元素获得焦点触发。...这个事件与 HTML 事件 focus 等价,但它冒泡 focusout: 在元素失去焦点触发。...在用户双击主鼠标按钮(一般是左边的按钮)触发 mousedown: 在用户按下了任意鼠标按钮触发 mouseup: 在用户释放鼠标按钮触发 mouseenter: 在鼠标光标从元素外部首次移动到元素范围之内触发

2.9K20

【H5】344- 微信 H5 页面兼容性解决方案

例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...端微信h5页面上下滑动卡顿、页面缺失 问题详情描述:在ios端,上下滑动页面,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后...出现原因分析: 笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现...弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入失去焦点的时候给一个事件 解决办法: <div class...但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享在安卓上设置分享成功,但是ios的分享异常 问题详情描述: ios当前页面分享给好友

2.6K30

微信 H5 页面兼容性解决方案

例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...端微信h5页面上下滑动卡顿、页面缺失 问题详情描述:在ios端,上下滑动页面,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,边是ios上下滑动后...出现原因分析: 笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现...失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入失去焦点的时候给一个事件 解决办法: <div class="title...但如果该元素已经在浏览器窗口的可见区域内,则<em>不会</em>发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享<em>时</em>在安卓上设置分享成功,但是<em>ios</em>的分享异常 问题详情描述: <em>ios</em>当前页面分享给好友,

3.2K30

DOM事件基本概念大总结(前端必备)

焦点一般只鼠标的焦点,虽然可以检测鼠标事件来监控,但是焦点可以通过键盘移动所以有专门的事件监控。...焦点事件标准不一,但是 DOM3 统一了一个标准并且规定了它的发生顺序 当一个元素移动到另一个元素会依次触发以下事件;一般 blur 与 focus 常见 focusout 在失去焦点元素上触发...,会冒泡 focusin 在获取焦点元素上触发,会冒泡 blur 在失去元素上触发,不会冒泡 DOMFocusOut 在失去焦点元素上触发,会冒泡; Opera 专有 focus 在获取焦点元素上触发,...不会冒泡 DOMFocusIn 在获取焦点元素上触发,会冒泡; Opera 专有 鼠标与滚轮事件 鼠标点击与移动 主要是点击、双击、光标移入、移出、暗下、放开的操作; mouseenter 首次移入元素内部触发...触摸屏 上述事件在移动端上又有所不同 并不支持 dblclick ,双击只会放大 轻击不可单击或者没有绑定 click 的元素什么事件也不会发生 在可点击或者绑定 click 的前提下点击会触发

1.8K20

微信H5页面兼容性解决方案

例如下图,左图是正常所期待的输入框光标,右边是ios的input光标。 ?...端微信h5页面上下滑动卡顿、页面缺失 问题详情描述:在ios端,上下滑动页面,如果页面高度超出了一屏,就会出现明显的卡顿,页面有部分内容显示不全的情况,例如下图,右图是正常页面,左边是ios上下滑动后...出现原因分析: 笼统说微信浏览器的内核,Android上面是使用自带的WebKit内核,iOS里面由于苹果的原因,使用了自带的Safari内核,Safari对于overflow-scrolling用了原生控件来实现...弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入失去焦点的时候给一个事件 解决办法: <div class...但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 5、Vue中路由使用hash模式,开发微信H5页面分享在安卓上设置分享成功,但是ios的分享异常 问题详情描述: ios当前页面分享给好友,点击进来是正常

3.3K43

浅析UIApplication生命周期的一些delegate方法

#### 情景二 程序从前台退出到后台 当程序处于前台,单击home键,程序会自动退出到后台。在这个过程中,程序会先回调delegate的将要失去焦点的方法,证明程序**`将要失去焦点`**。...####情景五 在前台双击home键杀死程序 双击home键,只会调用delegate的将要失去焦点的方法(上面已经说过),证明程序将要失去焦点。...:下拉状态栏只会让程序失去焦点,并不会让程序进入后台。...因为下拉通知栏只调用了将要释放焦点的方法,没有调用进入后台方法,所以收起通知栏,只会调用已经获得焦点的方法,不会调用进入前台的方法。...收起工具栏,只会调用delegate的已经获得焦点的方法。 > 结论:下拉通知栏或者上拉工具栏,都只是回调delegate的即将释放焦点的方法,程序不会进入后台。

8.2K30

Javascript函数的简单学习

常用事件:     onabort:        对象载入被中断触发     onblur:         元素或者窗口本身失去焦点触发     onchange:       改变元素中的选项或其他表单元素失去焦点,并且在其获取焦点后内容发生过改变触发     onerror:        出现错误时触发     onfocus:        任何元素或窗口本身获得焦点触发...    onkeydown:      键盘键包括shift,alt被按下触发     onkeypress:     键盘键被按下,并产生一个字符触发,也就是说按下shift或者alt等键不会触发...:        单击鼠标左键触发,当光标的焦点在按钮上,并按enter键也会触发     ondblclick:     双击鼠标左键触发     onmousedown:    单击任何一个鼠标按键触发...    onmousemove:    鼠标在某个元素上移动持续触发     onmouseout:     鼠标从指定的元素上移动开始触发     onmouseover:    鼠标移动到某个元素触发

1.9K80

Java-GUI编程之事件处理

比如进入、点击、拖放等动作的鼠标事件,再比如得到焦点失去焦点焦点事件。...WindowEvent 窗口事件, 当窗 口状态发生改变 ( 如打开、关闭、最大化、最 小化)触发该事件 。 FocusEvent 焦点事件 , 当组件得到焦点失去焦点 触发该事件 。...KeyEvent 键盘事件 , 当按键被按下、松开、单击触发该事件。 MouseEvent 鼠标事件,当进行单击、按下、松开、移动鼠标等动作 触发该事件。...事件 触发时机 ActionEvent 动作事件 ,当按钮、菜单项被单击,在 TextField 中按 Enter 键触发 AjustmentEvent 调节事件,在滑动条上移动滑块以调节数值触发该事件...MouseEvent 鼠标点击等 MouseListener KeyEvent 键盘输入 KeyListener FocusEvent 组件收到或失去焦点 FocusListener AdjustmentEvent

1.3K20

移动端app开发问题及理解

onmouseup 鼠标按键抬起 onmouseover 鼠标进入某个元素 onmousemove 鼠标移动到元素 onmouseout 鼠标离开元素 onfocus 元素得到焦点 onblur...元素失去焦点 onchange 用户改变文本域内容 oninput 实时监听输入框变化 onpropertychange 与oninput一样,ie专属 onkeyup 键盘按键抬起 onkeydown...onscroll 元素滚动条被滚动 移动端事件有 click 单击事件 类似于pc端click,移动端中,连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart...手指触摸到屏幕触发 touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发,比如手指触摸屏幕,突然alert了,或者系统中其他打断了...iPhone的UIWebView(iOS2.0-12.0 ),WKWebView(iOS8.0+,macOS10.10+),Android的WebView WebView可以理解为手机应用中运行和展示网页的界面和接口

3.8K10

移动端那些戳中你痛点的软键盘问题及解决方法

(对于这点,ios本身是支持的,但是安卓却并不会主动让输入框出现在可视区域内) 4、对于部分ios系统下的部分微信webview内,发现软键盘收起,滚动上去的页面没有滚动下来,造成了下面区域留出了一片灰色的区域...IOS 软键盘收起表现 触发软键盘上的“收起”按钮键盘或者输入框以外的页面区域输入失去焦点,软键盘收起。 Android 软键盘收起表现 触发输入框以外的区域输入失去焦点,软键盘收起。...但是,触发键盘上的收起按钮键盘输入框并不会失去焦点,同样软键盘收起。 ? ? 2、为什么fixed会失效 既然ios键盘弹起,页面会上移,那么为什么fixed会失效呢。...,IOS输入框都会失去焦点,键盘会收起, inputRef?....参考文章: WebView上软键盘的兼容方案[5] js如何获取iOS键盘高度[6] 移动端input“输入框”常见问题及解决方法[7] ios键盘难题与可见视口(visualViewport)api[

7.7K30

javascript事件流的原理

1、事件流感性认识 问题:单击页面元素,什么样的元素能感应到这样一个事件? 答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面。...单击最里面的圆,同时也单击了外面的圆,所以外面圆的click事件也会被触发。...IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。 2)、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。...note: 1)、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件...所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。

1K10

JQ事件和事件对象

1 事件 一 .鼠标事件    1.ready()页面载入事件:载入文档节点    2 click()熟悉的单击事件    3 dbclick()双击事件    4 mousedown() /mouseup...():鼠标移入“所选元素”才会触发,如果鼠标移入所选元素的后代不会触发(增加阻止事件冒泡功能) <div class="div2...    2  blur(): <em>失去</em><em>焦点</em>事件     3 focusin()  :获得<em>焦点</em>事件     4 focusout() :<em>失去</em><em>焦点</em>事件     5 change()  :元素发生改变<em>时</em>,触发事件...可以在父元素上检测子元素获得<em>焦点</em>的情况 而focusout可以在父元素上检测子元素<em>失去</em><em>焦点</em>情况  四 其他事件   1 scroll()滚动滚动条<em>时</em>触发的事件      2  resize()当调整窗口大小时触发的事件...推荐用event.which来监视键盘<em>输入</em>。

4.1K20
领券