IOS下H5的input/textarea元素失去焦点时隐藏键盘

IOS下document添加一个click事件不触发，不会失去焦点，导致点击input框外的其它地方不会自动消失键盘，还有就是双击其它空白地方会导致整个页面上移

既然click不能触发，可以用移动端的touch事件进行：

ontouchstart
ontouchmove
ontouchend
ontouchcancel

判断当前点击的元素是不是在输入框上，不是就调用blur()方法主动失去焦点即可。

时间： 2024-11-10 23:41:30

IOS下H5的input/textarea元素失去焦点时隐藏键盘的相关文章

js控制ios端的input/textarea元素失去焦点时隐藏键盘

同事在测试产品时发现这样一个:"某些页面击完input框,在点空白处时,iOS设备的键盘不能隐藏并且焦点也不会失去" 带着这个问题我进行了测试,发现在安卓的设备上并没有这种问题出现. 于是写js进行测试给document添加一个click事件,发现了问题的原因: 安卓是可以触发click事件的,而iPhone不会触发. 也就是说在iOS设备下你点击空白的document处input并不能失去焦点. 解决办法: 既然click不能触发iPhone的事件,那就需要找触屏事件来触发一次: o

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

input输入框在获得或失去焦点时隐藏或显示文字,这样的焦点效果想必很多朋友在填写form表格的时候都曾见识过吧,本文使用jquery实现以下,感兴趣的朋友可以参考下哈大家可以看效果图的搜索输入框,默认显示着“用户名/Email”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“用户名/Email”的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:

iOS中 H5的input输入框focus()无法自动拉起键盘（解决方法）

ios的hybird APP 无法使用focus()获取焦点和键盘的问题. 解决方案原来,在App的配置文件(config.xml),里面默认会有一句 1 <preference name="KeyboardDisplayRequiresUserAction" value="true" /> 这里面的大概意思就是,键盘的显示需要用户去触发,而且是设置为true的!!! 那么下面你们知道怎么做了吧,只需要把value的值改为false,一切都解决了. 1

iOS下的 Fixed + Input BUG现象

<body class="layout-scroll-fixed">  <header> </header>  <main> <div class="content">  </div> </main> <!-- fixed定位的底部 --&

iOS下的 Fixed + Input（时间日期选择、select 选择等等）出现的问题

当输入时,软键盘被唤起,页面的 fixed 元素将失效(可以改为 absolute 定位,调整top位置),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动滚动流畅性问题:加 -webkit-overflow-scrolling: touch; 第三方插件貌似也能解决这个问题:isScroll.js 原文地址:https://www.cnblogs.com/hehuiqiong/p/12559334.html

去除浏览器中a、input获得焦点时的高亮边框

a,input等元素在android原生浏览器下获得焦点时,元素外围会出现一个橙色的高亮边框若要去除它,通常的办法是: 代码如下复制代码 a:focus,input:focus{ -webkit-tap-highlight-color:rgba(0,0,0,0); } 不过看起来,这种方案在android 4.0以上版本的浏览器中是无效的.已知的一种在android 4.0以上版本浏览器中可以移除高亮边框的办法是: 代码如下复制代码 a:focus,input:focus{ -webkit

IOS开发隐藏键盘的4种方法

IOS开发隐藏键盘的4种方法开发的app中常会用到键盘输入完成后隐藏键盘的情况.在此总结了4种方法来实现我们的目的. 方法一--delegate方式第一种隐藏键盘的方法,称为delegate三步法: 1. 遵循(委托/代理); 2. 调用; 3. 关联头文件(ViewController.h)中遵循代理 . 代码如下: #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UITextFieldDel

当元素获得焦点和失去焦点时，触发的事件。

我遇到一个问题,点击文本框时,文本框的值消失,点击文本框外时,值还原.经过一系列的过程, 解决的内容:如下: 下面内容摘取于Jquery. 当元素获得焦点时,触发 focus 事件. 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持focus方法. 当页面加载后将 id 为 'login' 的元素设置焦点: $(document).ready(function(){ $("#login").focus(); }); 使人无法使用文本框:

CSS实现控制元素的显示和隐藏

1 使用label + input实现元素的隐藏和显示以下代码点击‘菜单’可以实现li列表的显示和隐藏: <style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } input:checked ~ ul { display: block; } </style> <body> <label for="menu">菜单&l