移动端不调用手机安全键盘

最新推荐文章于 2024-01-04 21:46:09 发布
最新推荐文章于 2024-01-04 21:46:09 发布
阅读量184 收藏 1
点赞数
分类专栏： vue3 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love_yourself_ok/article/details/134812434
版权

小米手机键盘没有顶上页面内容，输入框失焦且键盘收起，页面底部还是留下空白。后来发现，是因为密码输入框调用了手机自带安全键盘，才出现键盘收起，页面留下一部分空白的问题

解决方法如下：
1、把input的type改成text或其他类型，不要用password
2、给input加上以下样式

-webkit-text-security:disc;
text-security:disc;

到此，完美解决

倔强小李
关注
专栏目录
移动端 input 调用手机键盘搜索功能
肖的博客
04-18 3581
html <input type="search" class="input"> js let keyword = document.getElementsByName('input')[0] keyword.onkeypress = function (e) { let keycode = e.which || e.keyCode if (keycode === 13...
移动端开发input标签调用数字键盘
热门推荐
唔厌组的秋秋空间
10-24 1万+
先上代码 6)value=value.slice(0,6)"/> maxlength属性规定输入内容的最大长度，有些浏览器会出现把type设置为number后maxlength就失效了，微信浏览器我测试的时候还没有遇到这种情况，为了预防万一我们可以加上以下这行代码：oninput="if(value.length>6)value=value.slice(0,6)" type="text"和
移动端html5页面,用js禁止弹出软键盘输入法
gvbjhbhh的博客
10-13 3326
移动端input文本框默认的焦点行为会弹起软键盘输入法,如果直接设置readonly则聚焦不了,因为需要多次聚焦,每次都弹出键盘又影响用户体验机页面美观
H5 密码 调起安全键盘 导致页面底部出现留白
IT诗人
09-18 2246
bug情况：使用米8的微信打开登录页，当输入密码时，会调起系统默认的小米安全键盘，偶发性出现键盘已收起，但页面未落下，底部原输入法位置变为空白。如下图： 首先尝试通用解决方式，如： https://www.jianshu.com/p/c8f3a4036251 https://blog.csdn.net/a_small_insect/article/details/85162236 实...
Input 标签 password 右边出现小键盘 取消办法
lhh0129的博客
05-24 582
取消小键盘的Css input::-webkit-input-safebox-button{ display:none; }
-webkit-text-security: disc；浏览器兼容问题
ffmihu的博客
11-17 2684
设置浏览器不记住密码,兼容
elementui 里使用input 密码框,输入时禁止弹出浏览器历史密码提示框
u010328533的博客
12-25 2288
解决方案,使用css的 -webkit-text-security: disc;官方api上,使用autocomplete属性不生效。
jQuery手机移动端点击弹出数字键盘输入代码.zip
09-21
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...
jQueryNumPad是一款移动端友好的jQuery数字键盘插件
08-10
3. **初始化插件**：调用`.numPad()`方法初始化插件，可以传递参数进行配置，例如设置键盘模板、是否允许小数等。 4. **绑定事件**：根据需要绑定键盘的事件，如按键按下、失去焦点等，以处理用户输入和操作反馈。 ...
vue实现移动端H5数字键盘组件使用详解
10-14
在Vue.js中实现移动端H5数字键盘组件是一个常见的需求，特别是在开发支付或输入数字的场景中。本篇文章将深入解析如何构建这样一个自定义组件，并提供详细的代码示例，以帮助开发者理解和实现自己的数字键盘组件。 ...
vue3+vant4 移动端软键盘弹出 收起导致项目样式布局错乱解决方案，亲测有效！！
枫ゞ的博客
01-04 2323
最近在做vue3 H5的移动端项目 我用的是vue3+vant4，然后在使用过程中发现 小米14手机在点击输入框软键盘弹出 时会导致项目布局整体向上移动 导致页面布局错乱。
vue 自定义键盘组件_Vue2基于mint框架，移动端实现自定义安全键盘
weixin_42498006的博客
01-14 580
Vue2基于mint框架，移动端实现自定义安全键盘2年前阅读 3331评论 0喜欢 2### 1、新建一个jianpan_test.vue子组件，写入以下代码```车牌前缀 {{item}}export default {computed: {result() {return {showTyper: this.showTyper,carNumber: this.carNu...
js 手机上input表单点击不弹出软键盘,jq禁用手机键盘
09-14 1万+
场景:有一个input或textarea输入表单,点击后会弹出键盘,影响体验. 但有时我们不需要弹出,而是点击另一个按钮后,自动输入文字到input中,.自动点击提交.方法是先disabled = true 禁用表单,自动点击提交后,如果需要恢复表单的输入功能,就再用disabled = false恢复表单. 示例   &lt;img src="ui/images/shuaxin.png...
JavaScript高手进阶：安全键盘
w2sft的博客
04-12 3872
为了安全考虑，很多有登录行为的网站，会对密码输入框进行保护。 本文介绍一种使用安全键盘的输入保护方式，可用于防键盘记录、防止自动点击。
uniapp，vue中h5项目实现数字密码键盘
业余前端的职业经历
02-19 2515
本来原生的h5 直接input type=“password” 这样会发现 也不是说不能输入数字。 只是让用户多了一步操作 的切换到数字的情况才能输入。 不知道安卓手机如何 反正苹果是这样的 （这样体验不好） 即使是你自己做一个数字键盘也是不行的，响应比较卡顿 （tips: 不让input输入框 弹出软键盘，直接设置readonly=true就可以） 但是有没有这种 password + number 这种组合形式嘛。 好像是没有吧 但是我们可以做一个出来。利用vue的双向绑定快速实现 tips 在pa
js 日期格式化_vant 日期组件，弹出的时候让手机自带软键盘弹出了
weixin_39969006的博客
12-03 222
依赖vant-ui框架做个日期弹框，用到DatetimePicker插件，DatetimePicker插件没有自带弹框效果，所以也得嵌套在van-popup组件里进行弹出。日期初始化的时候，显示的值为时间流 如下图！我们得把时间格式化，借助moment.js插件进行日期格式化。moment(value).format("YYYY-MM-DD")！bug!!!!!!!!!因为我们在手机上面点击inp...
密码输入框查看密码功能和移动端账号输入框调起英文键盘
qq_33684444的博客
10-24 1344
1、密码输入框查看密码功能 首先写一个密码输入框 <input type="password" placeholder="请输入密码"/> 点击查看密码按钮时将input的type改为text，就可以把内容显示出来了 2、移动端账号输入框调起英文键盘 原本是把账号输入框的type设置为text 但是由于项目中账号格式是英文加数字，而type为text的input是...
vue h5嵌套app里 input框聚焦但不要弹出键盘
weixin_45108907的博客
12-27 1357
需求：用户进入页面的时候，希望光标聚焦，但是不要弹出软键盘 思路： 在用户点击之前使用div盒子替代，利用伪元素做出聚焦的样式，当用户点击修改的时候，再触发聚焦事件 data() { return { isShow: true //默认显示 }; }, <van-row class="div-radius"> <van-col span="24"> <div class='flex username' v-if='
关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析
劲枫的博客
05-04 1万+
前言： 问题场景：需要在本页面点击一个div，动态show一个遮罩层，遮罩层里面有一个输入框，输入框使用Vant的Field组件写的。过程中并没有页面跳转。（本问题场景出现在mpvue中，在vue、H5等其他场景同样可以借鉴。） 解决方法： 在template里面引入对应组件（本文用的Vant，可以用原生Input，或者其他组件） 在data()里面设置聚焦初始为false...
移动端vue3弹起键盘不收回
最新发布
09-15
在移动端使用 Vue3 开发过程中，有时会遇到输入框（比如 `v-model` 绑定的 `<input>` 或者第三方库的文本组件）当焦点获取到时，虚拟键盘弹出但是不会自动收起的问题。这通常是由于浏览器的行为或者是某些 CSS 的影响。 解决这个问题的方法有： 1. **手动处理**: 使用 JavaScript 监听输入框的 `focus` 和 `blur` 事件，当失去焦点时主动调用键盘隐藏的 API，如在 iOS 中可以尝试 `document.activeElement.blur()`。在 Vue 中，你可以这样做： ```javascript <template> <div> <input ref="inputField" v-model="value" /> </div> </template> <script> export default { data() { return { value: '', }; }, mounted() { this.$refs.inputField.addEventListener('focus', () => { // 当聚焦时，开始监听键盘收起 document.body.addEventListener('touchmove', this.handleBodyMove); }); this.$refs.inputField.addEventListener('blur', () => { // 当失焦时，移除键盘收起的监听并隐藏键盘 document.body.removeEventListener('touchmove', this.handleBodyMove); this.hideKeyboard(); }); }, methods: { hideKeyboard() { if (window.navigator.userAgent.match(/(iPhone|iPod|iPad)/)) { const keyboardHeight = window.innerHeight - document.documentElement.clientHeight; if (keyboardHeight > 0) { window.scrollTo(0, -keyboardHeight); } } else { // 可能需要针对其他平台做适配 } }, handleBodyMove(e) { e.preventDefault(); // 阻止默认的滚动行为 }, }, }; </script> ``` 2. **使用第三方库**: 如果你在项目中使用了像 Element UI、Vuetify 等库，它们通常提供了一些内置的方法来处理键盘问题。 **相关问题--:** 1. 是否可以使用 Vue 自带的生命周期钩子解决此问题？ 2. 除了 touchmove，还有哪些事件可用于检测键盘状态？ 3. 这种解决方案是否会影响页面的性能？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值