微信小程序中input控件自动聚焦、软键盘的关闭和打开

最新推荐文章于 2024-08-06 11:03:08 发布
最新推荐文章于 2024-08-06 11:03:08 发布
阅读量1.1w 收藏 2
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wymsn01520___/article/details/80215185
版权
本文介绍了微信小程序中input控件的聚焦、键盘管理相关属性，如cursor-spacing用于设定光标与键盘的距离，auto-focus实现自动聚焦并弹出键盘，focus属性用于获取焦点，confirm-type和confirm-hold则分别用于定制键盘右下角按钮的文字及点击后的键盘行为。
摘要由CSDN通过智能技术生成

input控件除了获取和显示用户输入的语句，很重要的一个功能是聚焦和键盘使用，下面就相关属性做详细地介绍：


  1. cursor-spacing:  
    类型：Number
    指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
  2. auto-focus:true
    类型：Boolean
    自动聚焦&#x
最低0.47元/天 解锁文章
Java_君
关注
专栏目录
微信小程序收起键盘（收起输入法）
shadowodahs的博客
02-18 605
调用 wx.hideKeyboard() 收起键盘。
小程序input获得焦点触发_微信小程序input失焦异常
weixin_39652136的博客
12-20 2003
1.问题描述初始打开页面，input框自动聚焦，在输入n位数字后自动触发事件进行业务处理，结果以页面底部弹框形式展示，同时input失焦。但目前问题是，底部弹框出现后，input再次获得焦点，导致键盘弹起，阻挡住底部弹框。只有在刚进入页面，第一次输入后会出现这个问题，保留在当前页面，第二次输入时一切正常。2.相应截图正常异常异常时输出3.代码片段{{ msg }}doSomething(e) {t...
uniapp小程序点击输入框时阻止弹出软键盘的几种解决方案
最新发布
长缨缚苍龙
08-06 666
解决方式2： 使用微信官方api阻止键盘弹出 hideKeyboard()解决方式3： 最简单暴力百分百不弹出的方法在此 设置disabled。解决方式1：@click更换成@tap。
小程序input自动聚焦拉起键盘
weixin_30566111的博客
04-24 1896
微信官方提供了两种自动聚焦的方法 1，auto-focus 接受boolean值；默认为false；只需设置为true即可 自动聚焦，拉起键盘；不过官方的提示即将废弃，所以能不用还是不要用 2，focus 接受boolean值；默认为false；只需设置为true即可 获取焦点（推荐使用） 3，如果想改变键盘右下角文字 confirm-type；值为search时，右下角文字为...
微信小程序之 input 聚焦问题
weidong_y的博客
04-19 6275
很多同学在使用微信开发者工具进行开发的过程中，使用 input 标签时都回面临到一个聚焦不了问题，导致无法在 input 中输入文字。关于这个问题，是微信开发者工具的一个 bug。只需要把电脑屏幕的显示比例修改为 100% 就行。 ...
auto-focus
newbeixue的博客
10-31 821
Hi there! As I verified, this camera doesn’t appear to have auto-focus. However, it has a particular spec named “focus_auto” which is bool and set to 1 by default. Can you tell me the meaning of this?...
微信小程序（组件--表单：交互控件）
2301_77110605的博客
04-20 790
针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。
微信小程序和uni-app面试高频知识点
qq_53694927的博客
11-27 885
微信小程序和uni-app面试高频知识点
微信小程序项目快速开发
jimson_zhu的博客
11-03 139
一）何为微信小程序 张小龙说：小程序是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 小程序能做什么：查天气、查交通、翻译、点餐、娱乐……都可以实现，覆盖了生活的方方面面。 小程序的定位：比网站体验好——可以使用手机原生的底层接口，比如...
非常googel虚拟键盘插件，能自动获取页面内的input焦点弹出无需另外编写js文件
04-24
非常全面的google虚拟键盘插件，一键安装并使用，能获取页面上所有的input标签，并自动弹出
wechatkeyboard微信小程序无序键盘
08-10
[wechat keyboard] 微信小程序无序键盘
小程序input自动获取焦点
热门推荐
leng0920的博客
02-22 1万+
 <input  type='text' focus='{true}' />   注 ：focus='true'会被解析成字符串
微信小程序收起键盘（微信小程序关闭键盘）
小诸葛的博客
10-19 5487
调用 wx.hideKeyboard() 方法即可收起键盘。 官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
小程序之坑---input自动获取焦点
hanchengmei的博客
03-10 1万+
项目：taro3+vue3+taro-ui-vue3 方法一： taro-ui-vue3的input组件的autoFocus、focus无效 方法二： 原生input组件的auto-focus在这个环境下也无效，但是在原生项目中有效 方法三： 通过用ref获取dom来获取焦点，开发工具中无效，真机有效 <input ref="inputRef" type="text" style="border: 1px solid #000"> setup(props, context) { cons
微信小程序Input组件聚焦问题兼容
踩坑之路
07-16 4614
微信小程序Input组件聚焦问题兼容 前言 最近小程序做得很频繁，无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来，最近在搞的小程序普遍都有表单，其中的Input清除内容以及聚焦弹起键盘的兼容坑得我死去活来，小程序的Input组件我愿称其为最坑组件，没有之一。 需求 先说一下要实现的需求，就是实现一个Input框的清除按钮，要求清除Input框内容并且在清除内容后自动弹起键盘，要求清除按钮只有在输入框聚焦且内容不为空时显示。需求很容易理解，且我一开始以为很简单。。。 实现过程
小程序H5如何隐藏软键盘
weixin_50236973的博客
05-23 367
【代码】小程序H5如何隐藏软键盘。
微信小程序默认获取聚焦事件
祈澈菇凉
01-15 4135
在input里面设置focus &lt;input type="text" focus="{{inputShowed}}" /&gt; 左边的是input没有获取焦点事件，也没有键盘弹出。 // 搜索框状态 inputShowed: false, 右边的是input获取焦点事件，默认有键盘弹出。 // 搜索框状态 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值