微信小程序关于键盘行为的探索

模拟微信朋友圈评论功能，如图：

首先考虑键盘将输入框顶起来，使得输入框正好在键盘上方

解决办法：fixed定位，将输入框定位在页面最下，键盘升起时会自动将输入框顶起来

于是有了这么一个demo：

有几个细节：

1.键盘右下角默认是”完成"按钮而非”提交“。可以通过设置input标签的属性 confirm-type="send" 来改变

2.键盘紧贴输入框，覆盖了输入框包裹层的下端。可以设置 cursor-spacing 来改变光标与键盘的距离

3.点击页面空白处和输入法的收起按钮时，输入框应该都会隐藏，这是个挺有意思的问题，看起来有点复杂，其实仅仅是输入框失焦事件而已

于是我们得到了一个相对完善的demo:

有一个严重的问题：<input>是单行输入框，而想要多行输入，必须要用<textarea>。那让我们看看标签替换成textarea表现如何：

键盘多了个足以逼死强迫症的表情和完成按钮，而且右下角是”换行“而非”提交“按钮。查询了一下api，发现对textarea标签而言，这些键盘默认行为无法改变。

所以标签换回input，那怎么做到多行输入呢？

这里做个猜想，输入框包裹层是一个<scroll-view>，在单行输入框输入到头时（监听输入并计算光标位置），再创建一个单行输入框，并将焦点给到这个输入框，这样就形成了多个单行输入框组成的多行输入框。最后点击提交时拼接所有输入框里的文本。

这种方法可不可行呢？我觉得可行，但是我又不想去做，没错，键盘侠就该这么自信。

以上是我关于微信小程序关于键盘行为的探索，因为自身水平有限，如果大家有错误或者有更好的方案，欢迎指正。

微信小程序关于键盘行为的探索相关推荐

微信小程序之登录态的探索
上一篇:开发微信小程序必须要知道的事登录,几乎什么项目都会用到,其重要性不言而喻,而小程序的登录却一直是为人头疼的一件事,这里我分享下我们在小程序登录上的探索通常的登录都是通过一个表单,这很正常, ...
微信小程序数字键盘（仿微信转账键盘）
微信小程序input自带数字输入键盘,不过是直接调用的系统键盘,无法个性化. 代码中使用使用了Vant WeappVant UI小程序版,这里就不介绍相关安装说明了,大家自行安装Vant Weapp. ...
微信小程序web-view与H5 通信方式探索
本文作者为奇舞团前端开发工程师小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 需求微信小程序 H5 混合开发就是在一个小程序中,采 ...
微信小程序自定义键盘，内部虚拟支付
先看效果图 : 微信支付的话,调用微信支付接口是有自己的小键盘的因为小程序没有内部键盘,所以有时候商城内部需要零钱支付 ,会员卡支付,输入密码就需要自己做一个小键盘了. css 跟 htm ...
微信小程序出现键盘页面上移的坑
在微信开发者工具没有出现上移的情况,但是一到真机调试就出现了,把页面设置固定布局也不管用然后查询微信官方文档,是这样解释的小程序在input框输入时,默认会开启自动上推的功能,但是有的时候会出现卡 ...
微信小程序中用键盘的搜索功能进行页面跳转
我们都知道,小程序中页面跳转是必不可少的,一边都是绑定事件bindtap,在js中写所跳转的路径即可,那么如何在搜索框里面点击手机键盘上的搜索功能,去进行页面跳转呢?这就用到了一个input中的一个事 ...
微信小程序自定义键盘|仿微信支付数字键盘
实现效果简介点击金额模块区域,获取焦点. 点击非金额模块区域,失去焦点且隐藏支付键盘. 支持小数点两位数字. 付款金额默认置灰,点击付款按钮无效.当输入付款金额后,付款按钮还原正常状态. 删除按钮 ...
微信小程序自定义键盘
效果图功能如果输入.直接补0. 如果是09 直接是9 如果是000那就有一个0 不能大于6位小数点不能大于两位仅能出现一次还有不输入是禁止支付的不能小于0.01 失去焦点隐藏面板光标问题有 ...
微信小程序收起键盘 wx.hideKeyboard()
需求: 当输入的手机号等于11位的时候,就收起键盘 if (phone.length == 11){wx.hideKeyboard() }

微信小程序关于键盘行为的探索

微信小程序关于键盘行为的探索相关推荐

最新文章

热门文章