在手机端点击input框不弹出输入法的方法

最新推荐文章于 2024-03-29 16:26:57 发布
最新推荐文章于 2024-03-29 16:26:57 发布
阅读量2.3w 收藏 14
点赞数 4
CC 4.0 BY-SA版权
分类专栏： 前端技术方案 文章标签： css 输入法 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_36069339/article/details/78601356
本文介绍了四种禁用HTML输入框交互的方法：1. 使用CSS的pointer-events属性；2. 通过JavaScript阻止鼠标点击事件；3. 替换input元素为非焦点获取的div标签；4. 利用JavaScript进行控制。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、使用CSS样式 ：
input { pointer-events: none; }

2、 使用事件阻止 ：
input.onmousedown = function (e) { e.preventDefault(); }
这样不仅会阻止键盘，同时 input 会失去光标跟随。
如果你的需求不受这点因素影响，可以采用这种方式，否则还是自定义实现吧。

3、使用其他非焦点获取的标签来代替input，比如div；

4、通过js控制：
这里写图片描述

浮窗和全屏应用同时存在，全屏应用输入法无法弹出
**My Coding Family**
10-13 889
如上问题有的来自我自身项目开发，有的收集网站，有的来自读者…如有侵权，立马删除。再者，针对此专栏中部分问题及其问题的解答思路或步骤等，存在少部分搜集于全网社区及人工智能问答等渠道，若最后实在是没能帮助到你，还望见谅！并非所有的解答都能解决每个人的问题，在此希望屏幕前的你能够给予宝贵的理解，而不是立刻指责或者抱怨！如果你有更优解，那建议你出教程写方案，一同学习！共同进步。ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏。
Vue2 - 手机移动端H5网页强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页微信内置浏览器）
最新发布
资深程序员
06-30 3750
vue，h5网页，窗口顶起，变形解决办法，Vue中input组件在IOS设备上弹出软键盘时页面整体上移问题的解决方案，以及input组件聚焦后弹出软键盘固定在，Vue3软键盘把界面顶起问题解决，vue解决键盘弹出页面内容挤压问题，input输入框组件，vue h5软键盘弹出，vue输入框，键盘弹起时页面整体上移问题，H5页面，解决软键盘弹起页面被挤压、被往顶的问题，解决vue输入框，键盘弹起时页面整体上移问题，vue调用手机系统软键盘，页面窗口被顶起，解决vue键盘弹起后顶部的导航栏往上顶的问题，键盘弹起时
禁止手机端点击input框跳出输入法
热门推荐
vcxiaohan的博客
03-30 2万+
第一种方式：，添加disabled，禁用输入框； 第二种方式：不使用input,使用其他非焦点获取的标签来代替，比如div； 第三种方式：通过js控制，
点击input禁止键盘弹起，任何组件的input都适用
qq_52850749的博客
03-29 1818
所以这个最简单的方式就是再写一个盒子把input框盖住，盖住input的盒子层级设置高一点，这样只会触发盖input的盒子，然后将选中的值赋值给input框。其实这个问题无非就是，我只想要一个input框的样式和v-model，点击input调起的是日历或者一些弹窗之类的...
autojs中点击输入框不弹出键盘怎么办？
m0_74176885的博客
12-14 2546
autojs中点击输入框不弹出键盘怎么办？
移动端html5页面,用js禁止弹出软键盘输入法
gvbjhbhh的博客
10-13 4239
移动端input文本框默认的焦点行为会弹起软键盘输入法,如果直接设置readonly则聚焦不了,因为需要多次聚焦,每次都弹出键盘又影响用户体验机页面美观
手机软键盘弹出时影响布局的解决方法
11-29
ios下点击输入框弹出软键盘时，布局没有大影响。 当输入框可能被软键盘压到时，在一部分安卓下却出了问题，华为自带浏览器和UC会有布局上的问题。 原因可能是因为，软键盘弹出时，改变了height，使height:100%,不能...
h5输入框在安卓里没有顶起页面，ios却好使
qq_46370075的博客
07-13 1657
h5在安卓里输入框弹出软键盘之后，没有将页面顶起来
2020-10-24-选中input框，隐藏输入法键盘
mollerlala的博客
10-24 1098
终端特点： 1、类似诺基亚的机皇款，本身带硬件键盘； 2、屏幕小，输入法的键盘展示会遮挡屏幕，隐藏使用体验。 需求： 1、进入页面，输入框自动聚焦； 2、隐藏输入法键盘，用设备自带的键盘type。 网上两种方法： 1、加readonly，此方法不能type，只能看，不适合我的业务场景。 <input type="text" readonly /> 2、此方法，我这边测试，在手机和终端设备上，虽然不弹出键盘，但是既不能type，也没有焦点。 $("#box").focus(funct
js 手机上input表单点击不弹出软键盘,jq禁用手机键盘
09-14 1万+
场景:有一个input或textarea输入表单,点击后会弹出键盘,影响体验. 但有时我们不需要弹出,而是点击另一个按钮后,自动输入文字到input中,.自动点击提交.方法是先disabled = true 禁用表单,自动点击提交后,如果需要恢复表单的输入功能,就再用disabled = false恢复表单. 示例   &lt;img src="ui/images/shuaxin.png...
微信小程序中点击input输入框避免唤起手机端的键盘
weixin_54957314的博客
03-14 2138
微信小程序禁用input输入框唤起键盘
input禁止弹出输入法窗口(保留焦点,可通过扫描头等方式录入)
逍遥游的博客
08-02 2488
input禁止弹出输入法窗口(保留焦点,可通过扫描头等方式录入)
js在Android端实现只出现光标不出现软键盘
qq_39157025的博客
05-13 388
文章目录 前言 实现方式 总结 前言 本文介绍了怎样在混合开发模式上Android端实现只出现光标不出现软键盘的功能 实现方式: 调用方式： <input id="test" onclick="keyborad()"> 实现方法： keyborad(){ document.getElementById("test").setAttribute("readonly","readonly") setTimeout(function() { ..
移动端在input中输入之后光标还存在
weixin_46554787的博客
12-08 289
生成一个适合你的列表创建一个表格设定内容居中、居左、居右创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入移动端在输入框中输入内容并点击确定后，光标通常会保留在输入框中。这是因为移动设备的默认行为是在输入后保留光标在输入框内，以便用户可以继续输入或编辑。如果你希望在用户输入完成后隐藏光标，你可以尝试使用JavaScript来实现。
html5 input 禁止键盘,手机端H5页面在input输入框获得焦点时禁止唤起键盘
weixin_42365604的博客
06-09 1679
一、平台手机移动端二、实现的效果当input输入框获得焦点时，在保留光标的情况下，又不让手机虚拟键盘弹起刚开始在网上找了一番，网上的回答大都自以为是，根本没有弄清诉求，他们提供的三种解决方法，把input框用div代替、给input框设readonly属性、input获得焦点时使其失去焦点，统统都达不到我想要这种效果好在后来还是让我找到了一位志同道合的博友，他的处境和我几乎一样，而且他的解决办法也...
Auto.js之UI页面打开弹出输入法
Christma1s的博客
09-13 1417
//启动UI不弹出输入法 activity.getWindow().setSoftInputMode(android.view.WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
解决 input 元素点击有蓝色边框的问题
子溪随笔
01-12 1318
** 问题描述 **：使用 input 标签画了一个搜索框的元素，但是点击的时候有蓝色边框出现。 ** 分析 **：应该使用边框相关的样式来解决。 ** 解决 **：使用 outline: none 的样式解决问题。outline，即元素轮廓。 ...
聊天系统手机端输入法往上推
03-27
### 手机端聊天系统中输入法弹起时界面调整的解决方案 在移动端聊天系统的开发过程中，当软键盘弹出时可能会导致页面布局发生异常变化。以下是针对该问题的具体分析和解决方案。 #### 1. 软键盘弹起时遮挡输入框的情况 如果客户端未设置 `windowSoftInputMode="adjustResize"` 属性，则软键盘会在 WebView 上方显示，从而始终遮挡住输入框[^1]。此时可以通过 JavaScript 动态监听窗口高度的变化来检测软键盘的状态并作出相应处理： ```javascript var originalHeight = window.innerHeight; function adjustLayout() { if (window.innerHeight < originalHeight) { document.querySelector('.input-box').style.transform = 'translateY(-' + (originalHeight - window.innerHeight) + 'px)'; } else { document.querySelector('.input-box').style.transform = ''; } } window.addEventListener('resize', adjustLayout); ``` 上述代码通过比较当前窗口的高度与初始高度之间的差异动态调整输入框的位置，使其保持可见状态[^3]。 #### 2. 页面被顶起导致顶部消息不可见的问题 对于 H5 页面中的聊天功能而言，软键盘弹出会触发页面滚动行为，进而可能使顶部的消息区域超出视图范围[^2]。为了避免这种情况的发生，在构建页面结构时可以采用如下方式分离消息列表与输入栏： ```html <!-- 消息列表 --> <scroll-view class="msg-list" scroll-y="true"> </scroll-view> <!-- 底部输入栏 --> <view class="input-box" style="position: fixed; bottom: 0;"> <input class="input" /> </view> ``` 在此基础上还需禁用默认的页面自动适配逻辑以防止不必要的位移现象： ```javascript document.querySelector('.input').setAttribute(':adjust-position', false); ``` 此方法能够有效阻止由于软键盘引发的整体页面移动效果。 #### 3. 固定位置控件受软键盘影响错乱的现象 部分场景下可能存在某些按钮或其他交互组件原本应固定于屏幕某处却因软键盘升起而改变其实际展示位置的情形[^4]。对此类状况可采取隐藏策略加以规避——即每当检测到软键盘显现便临时隐藏这些受影响较大的元素；待恢复正常后再重新展现出来即可实现较好的用户体验优化目的: ```javascript var win_h = $(window).height(); $(window).on('resize', function(){ if ($(this).height() < win_h){ $('.fixed-bottom-button').css({display:'none'}); }else{ $('.fixed-bottom-button').css({display:''}); } }); ``` 以上三种措施分别对应不同类型的挑战提供了切实可行的技术手段予以应对，综合运用它们便可较好地满足大多数实际应用场景下的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值