js移动端禁止手机软键盘弹出

已于 2022-07-12 23:59:40 修改
阅读量1.8k 收藏 3
点赞数
文章标签： vue.js html5 css3 javascript
于 2022-07-12 23:58:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32825399/article/details/125754659
版权
这篇博客探讨了如何通过JavaScript实现禁止软键盘弹出的功能。`forbid()`函数在输入框获取焦点时触发，主动移除当前活动元素的焦点，从而阻止软键盘显示。同时，文章也提供了弹出软键盘的代码示例，展示了对输入元素的焦点操作。

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

<input @focus='forbid'>

forbid(){
	//禁止软键盘的弹出
	document.activeElement.blur();
}

下面是弹出软键盘
document.getElementById('xxx').focus()
Vue2 - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原的问题，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）
王二红
04-07 5015
vue，移动端网页，输入框弹起软键盘，布局没有上移，弹出软键盘的时候页面顶起不恢复，实现移动端自动弹起软键盘，软键盘挡住输入框的解决方案，移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法，vue h5页面软键盘遮挡等，软键盘顶起页面，H5，input输入时，软键盘弹起不能自动收回，移动端软键盘监听弹出收起及影响定位布局，H5-input弹起键盘遮盖输入框，收起后导致页面无法复原的问题，输入框弹起软键盘，收起后导致页面无法复原的问题，移动端的软键盘对页面css布局影响的解
JS屏蔽键盘输入 屏蔽键盘
08-16
JS屏蔽键盘输入 JS屏蔽键盘输入JS屏蔽键盘输入 JS屏蔽键盘输入
【JS篇】禁止手机默认键盘弹出
章魚尐芄子的博客
07-21 2641
js 禁止手机默认键盘弹出
移动端html5页面,用js禁止弹出软键盘输入法
gvbjhbhh的博客
10-13 4073
移动端input文本框默认的焦点行为会弹起软键盘输入法,如果直接设置readonly则聚焦不了,因为需要多次聚焦,每次都弹出键盘又影响用户体验机页面美观
JS_H5禁止手机自带键盘弹出
小歪博客
03-04 866
禁止弹出方法 document.activeElement.blur(); 使用 <input type='text' name='text' id='input' /> document.getElementById('input').focus(function(){ document.activeElement.blur(); });
HTML5页面，用JS 禁止弹出手机键盘
ak47147258369的博客
12-22 1443
用户点击input的时候； 会默认调出手机软键盘； 场景：文本框获取焦点时，需要禁止手机弹出自带的输入键盘； 解决方案1： 用一个p/div等标签显示内容；然后放一个隐藏的input； （可能的场景：当扫描二维码或者别的操作时候，JS赋值隐藏的input值和显示的文本；） （可能的场景：当用户点击输入框，调出自定义的日期软键盘或者数字输入键；阻止自带输入键盘的弹出） ...
手机软键盘弹出时影响布局的解决方法
08-31
在移动应用或网页开发中，一个常见的问题是手机软键盘弹出时会影响到页面的布局，导致内容被遮挡或者页面错位。这个问题在不同设备和浏览器上可能会有不同的表现，特别是Android设备，由于各厂商定制系统的差异，...
Html5页面上如何禁止手机虚拟键盘弹出
11-21
本文将探讨两种在HTML5中阻止手机虚拟键盘弹出的方法，并分析它们的优缺点。 **方法一：使用`readonly`属性** `readonly`属性是HTML5中用于设置输入框为只读状态的特性。当一个`<input>`元素设置了`readonly`属性...
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
10-16
监听软键盘事件主要目的是在键盘弹出时能够触发某些操作，比如改变页面的滚动行为，或者将键盘弹出时点击的输入框滚动到视口内，避免被键盘遮挡。 最后，文章提出了一种实用的解决方案：当键盘弹出时，可以选择隐藏...
各种禁止键盘的经典JS
10-30
键盘禁止的经典JS：禁止粘贴、禁止拖动、关闭输入法
禁止软键盘弹出,自定义键盘
12-13
禁止软键盘弹出,自定义键盘
js关闭手机键盘
qq_38677540的博客
08-26 746
js
JavaScript 移动端 input获得焦点后，禁止弹出输入键盘
最新发布
qq_19306197的博客
11-13 718
业务场景：有一台手持设备，开发网页扫码，输入框需要自动获取焦点，但不能弹出输入键盘。参考了下面文章，但用vue方式写的，自己转了JavaScript。
js禁止手机弹出虚拟键盘 - 代码篇
草巾冒小子的博客
11-27 1707
js禁止手机弹出虚拟键盘 技术点： 手机微信页面等apk程序或手机页面浏览器复制文本，与PC的区别？ 如何复制文本？ 如何屏蔽虚拟键盘，让它不再弹出？ 用户需求场景： 复制文本（推广链接，分享链接等等）并粘贴给好友 某考试平台 · 推广员页面（扫描二维码推广、复制邀请码推广） 代码 · 设置 · 如下： <textarea id="textarea "><!--我...
移动端如何在前端对于输入框进行点击，滑动，长按操作时禁止拉起自带软键盘
qq_45346359的博客
08-18 2028
移动端如何在前端对于输入框进行点击，滑动，长按操作时禁止拉起自带软键盘
H5页面关闭软键盘
热门推荐
新博客地址：blog.songchunmin.com
07-04 2万+
H5页面关闭软键盘
js低版本ios关闭键盘不能完全关闭
Xiao_ShiGuang_941111的博客
08-27 222
低版本ios，input设置成readonly="readonly"关闭键盘不能完全关闭
移动端h5页面软键盘打开时改变页面高度
05-30
在移动端H5页面中，当软键盘打开时，页面高度会发生改变。为了适应软键盘的高度，可以通过以下方式改变页面高度： 1. 使用CSS3的vh单位 在CSS中使用vh单位可以将页面高度设置为视口高度的百分比。当软键盘弹出时，视口高度会减小，页面高度也会随之减小，从而达到适应软键盘高度的效果。例如： ```css html, body { height: 100vh; } ``` 2. 监听resize事件 可以通过监听resize事件来获取窗口高度，并根据窗口高度计算页面高度。当软键盘弹出时，窗口高度会减小，可以根据窗口高度计算出适应软键盘高度的页面高度。例如： ```javascript window.addEventListener(&#39;resize&#39;, function() { var windowHeight = window.innerHeight; var pageHeight = windowHeight + &#39;px&#39;; document.body.style.height = pageHeight; }); ``` 需要注意的是，这种方式需要在样式中设置height为100%或者其他百分比值，否则无法达到适应软键盘高度的效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值