移动端h5唤起键盘_移动端javascript拉起软键盘

最新推荐文章于 2022-08-18 17:36:20 发布
最新推荐文章于 2022-08-18 17:36:20 发布
阅读量4.5k 收藏 1
点赞数
文章标签： 移动端h5唤起键盘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39719727/article/details/112839659
版权
本文详细探讨了在移动端H5中如何唤起键盘，包括使用input和textarea标签，以及contenteditable属性。针对键盘弹起事件，讨论了iOS和Android的不同处理方式，如设置autofocus在iOS上的限制。同时，文章提供了实现隐藏input聚焦以唤起键盘的解决方案，以及在Android和iOS上不同的实现策略，并介绍了type='search'在搜索框中的应用。
摘要由CSDN通过智能技术生成

先上图来镇楼

坑啊，知乎居然不支持gif，点这里看

一、文本输入

文本输入html元素

1、input标签，且type类型为text，number，search，tel，password，email，url等等。如果在未实现的设备上，会自动降级为text类型，缺省值为text。

2、textarea标签

3、设置contenteditable=”true”的标签

二、软键盘的事件

软件盘有哪些事件呢，常见的就是弹起和收起了

1) 键盘弹起

网传以下结论a. iOS6之前，当控件获得focus的时候，如果不是用户触发的事件，键盘是不会弹起的。需要用户手点击，也就是说单纯依靠JavaScript是无法做到的。

b. 在iOS6之后，设置了一个属性(autofocus)可以做到。

c. 在Android上，只要不是用户触发的事件都无法触发。

但是经过验证，autofocus在ios上也无效，如果不是用户触发的事件，键盘是不会弹起的。

2) 键盘的收起

可以通过js的blur的方式来实现。

用户触发，要不是直接点击文本输入元素，要不就是间接点击。

间接点击是个什么意思呢：

点击我呀

以上代码，你点击label的时候，input就会获得焦点，这样就能顺利的拉起键盘。

但有个前提条件，input不能被设置为display:none;或者visibility:hid

最低0.47元/天 解锁文章
移动端h5唤起键盘_移动端H5界面打开后，如何自动调用软键盘
weixin_39914049的博客
12-20 2435
test(){// let aa = this.$refs.input1.blur();// this.$nextTick((x)=>{ //正确写法// // this.$refs.inputs.focus();// // console.log(x)// // this.$refs.inp[0].$refs.input.focus();// },3000)// $a...
h5底部输入框被键盘遮挡_总结几个移动端H5软键盘的大坑【实践】
weixin_39733232的博客
10-19 1394
转载链接：https://segmentfault.com/a/11900000221151771、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。true，表示元素的顶部与当前区域的可见部分的顶部对齐false，表示元素的底部与当前区域的可见部分的尾部对齐Element...
JS自动让手机调出软键盘，进行输入
weixin_30291791的博客
09-30 1394
$('.search').click(function(){ $('input[type=text]').focus(); //让input框自动聚焦就可以让手机自动调出软键盘 }); 转载于:https://www.cnblogs.com/pyspang/p/9732524.html...
html5手机键盘弹出收起的处理
11-21
前言：前端时间也是应项目的需求开始了h5移动端的折腾之旅，在目前中台的基础上扩展了两个ToC移动端项目，下面就是在h5移动端表单页面键盘弹出收起兼容性的一些总结。 问题 在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。 键盘弹出 IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度
移动端h5唤起键盘_移动端H5监听键盘弹出和收起
weixin_29765949的博客
02-12 2235
const ua=window.navigator.userAgent.toLocaleLowerCase();const isIOS= /iphone|ipad|ipod/.test(ua);const isAndroid= /android/.test(ua);if(isIOS) {let isReset= true; //是否归位this.focusinHandler = () =>{isR...
H5页面唤起手机数字键盘
zcy_csdn123的博客
06-09 3220
H5唤起手机数字键盘
【VUE/H5】H5调起数字键盘的坑，及手写移动端键盘代码
热门推荐
LuviaWu的博客
05-07 1万+
h5 调起数字键盘的坑 为了限制只能输入数字，不能输入小数点、加减号，走了敲多的弯路~~（查各种资料，然后各种测试） 现下来看看笔记： HTML5加入了新的input类型 number，这是方便数量输入的。如果是在移动端中，属性type=”number”和type=”tel”会唤起系统的数字键盘，这对于交互还是挺友好的。 一、 type="number"时 1、只允许输入数字，（兼容ios、安卓）...
可能这些是你想要的H5软键盘兼容方案(小结)
12-14
总的来说，处理H5软键盘兼容问题需要对不同平台的特性有深入理解，以及熟练运用JavaScript和CSS技术。在实际项目中，可以创建一个跨平台的软键盘管理模块，统一处理键盘事件、高度计算和页面布局调整，以实现输入框...
h5移动端键盘处理总结
_
03-03 2070
本文首发于 hzzly的博客 原文链接：h5手机键盘弹出收起的处理 问题 在 h5 项目中，我们会经常遇到一些表单页面，在输入框获取焦点时，会自动触发键盘弹起，而键盘弹出在 IOS 与 Android 的 webview 中表现并非一致，同时当我们主动触发键盘收起时也同样存在差异化。 键盘弹出 IOS：IOS系统 的键盘处在窗口的最上层，当键盘弹起时，webview 的高度 height 并没有改变，只是 scrollTop 发生变化，页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度，而只
手机软键盘弹出时影响布局的解决方法
08-31
在移动应用或网页开发中，一个常见的问题是手机软键盘弹出时会影响到页面的布局，导致内容被遮挡或者页面错位。这个问题在不同设备和浏览器上可能会有不同的表现，特别是Android设备，由于各厂商定制系统的差异，...
解决 h5 唤起键盘后，导致了页面偏移。
qq_29615135的博客
09-18 1095
window.addEventListener('resize', () => { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(() => { if ('scrollIntoView' in document.activeElement) { document.acti
H5搜索页调起软键盘
weixin_45102016的博客
02-22 1206
在input框加autofocus=“autofocus”，发现有时好用，有时会闪现一下又消失，然后在mounted里加入一句代码，貌似好了 // 进入页面调起键盘 this.$nextTick(() => { this.$refs.serachInput.focus() })
h5唤醒软键盘(数字键盘)
zhangxue_227的博客
08-22 2711
点击input 自动唤醒键盘；如果不能唤起或者很慢，可以在点击的时候调一下自动聚焦的方法 （1）数字键盘： <form action="javascript:;"> <input pattern="[0-9]*"> </form> (2)26键 数字键盘 <form action="javascript:;"> <input type="...
解决H5手机端唤起键盘，底部的footer一起上去的方法
qq_39234840的博客
08-29 2032
&lt;footer class="footer" id="footer"&gt; &lt;a href="sendStaOrder.jsp" &gt;派送中订单&lt;/a&gt; &lt;a href="sendStaHistoryOrder.jsp" &gt;历史订单&lt;/a&gt; &lt;a href="se
移动端h5唤起键盘_H5移动端页面点击input重复弹出键盘的实现方法
weixin_39747399的博客
12-20 1647
本文主要和大家分享H5移动端页面加入canvas可滑动代码条件下android手机点击input重复弹出键盘，在移动端页面使用canvas的动画，为了实现动画的触摸滑动，会加入createjs.Touch.enable(stage, true, false)这条语句，但加入这条语句后，页面的input和click等可点击事件都会失效，所以会用触摸事件来实现相关功能，如下：$('#button')....
移动端H5输入框调用手机软键盘，导致底部固定定位被顶起问题解决
u014165391的博客
08-18 6270
可以监听window对象的resize事件，判断当前屏幕高度是否小于原始屏幕高度，从而来对底部定位的元素控制其显示、隐藏；这个可以解决大部分手机的固定定位被顶起问题，但是对于部分iphone手机使用某些第三方输入法关闭事件可能监听不到。部分安卓和ihpone手机在调起手机软键盘时，会将固定定位元素顶起；当页面内容过多时，会导致内容被遮挡，无法查看，从而影响用户体验；......
h5 input调起数字键盘
八佾舞于庭
11-09 2095
ios: type="number" 调起的数字键盘不是九宫格 iOS中，只有[0-9]\*才可以调起九宫格数字键盘，\d 无效 android: type="number"以及下面两种都能调起九宫数字键盘 &lt;input type="number" pattern="\d"&gt; &lt;input type="number" pattern="[0-
记录下：h5调用键盘的search键
qq_42026855的博客
07-11 2070
1. 将type="text" 改为type="search"2. IOS需要给input外面加form,比如    &lt;form action="javascript:return true;"&gt;   &lt;div class='search-block'&gt; &lt;div class='search-inner'&gt; &lt;input type=&a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值