小程序如何处理键盘覆盖输入框

李世赞发布于2019-08-23 14:20 / 3176人阅读

摘要：在移动端里当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况在小程序中也发生了类似情况但小程序提供了一些但不能达到需求这里来简单说一下解决思路小程序的默认行为在发生了键盘覆盖输入框的时候在不操作任何的情况下小程序会把屏幕向上推推到输入

在移动端里, 当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况, 在小程序中也发生了类似情况, 但小程序提供了一些api, 但不能达到需求. 这里来简单说一下解决思路.

小程序的默认行为

在发生了键盘覆盖输入框的时候, 在不操作任何api的情况下, 小程序会把屏幕向上推, 推到输入框正好在键盘上方的位置.

也就是如果不经过处理, 小程序的键盘是不会覆盖输入框的. 但是在我的需求里这样还不够, 因为页面上部分是需要持续展示的内容, 不希望把页面向上推.

所以下面要通过小程序的api来解决这些问题.

cursor-spacing

在比较正常的UI设计中, 输入框外面实际都会有一层wrapper, 而很明显小程序是默认行为是不知道的, 所以结果是会把这层wrapper的下半部分(输入框以下的)切掉. 那么就非常难看了.

引入这个apicursor-spacing, 设多少, input下面就留多少. 这个数字应当是"输入框下边缘到wrapper结束的距离".

小程序的坑在于: 文档上的单位是错的, 本来就需要试才知道这个属性的含义是什么, 所以单位错导致无效果就让一(大)部分人放弃了. 正确的单位是带有单位的字符串. 例如10px或者100rpx.

adjust-position

刚才说到我的需求, 我希望页面不向上推, 而直接把输入框顶上来.

于是尝试了这个api. 默认是true, 把他设为false. 效果变成了: 点了输入框, 键盘完美覆盖输入框.

于是在加上cursor-spacing, 发现这两个api是不能同时生效的.

所以最后结论是: 单纯用提供的api无法实现需求了. 所以只能监听事件自己做.

解决方案

手动操作输入框思路:

adjust-position设为false.

在输入框的wrapper的bottom样式绑到本地数据, 并设为absolute定位.

在focus事件里改变输入框的位置.

在blur事件里复原输入框的位置.

按照这个思路操作, 遇到了几个问题:

如何确定输入框的位置

发现在bindfocus事件中可以获得键盘的高度, 经过尝试, 键盘的高度是以px为单位的. 所以直接把bottom的值设为px高度就行了.

如果输入框wrapper的相对定位不是页面底部, 情况就比较复杂, 若是用rpx为单位, 需要获得屏幕宽高来计算px数, 在不麻烦的情况下可以调整布局使wrapper相对于页面底部定位.

在改变style后输入框立即失去焦点

发生了这个情况后表现为: 点了输入框, 输入框的wrapper闪一下又回原处. (因为失去焦点)

经过多次试验, 需要做的是在绑定一个本地变量到focus属性.

然后用wx:if根据是否focus隐藏输入框, 放一个假的输入框, 点击以后使改变focus属性来唤起键盘.

贴一份实现的代码.

原文地址

云服务器 GPU云服务器泄露数据如何处理如何处理海量数据如何处理大量数据大数据如何处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100445.html

前端培训-初级阶段-场景实战（2019-05-30）-input 搜索如何防抖，如何处理中文输入

摘要：在掘金摸鱼的时候看到了一个题第题搜索如何防抖，如何处理中文输入，感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我...

Yuanf 2019-08-26 13:57 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-30）-input 搜索如何防抖，如何处理中文输入

摘要：在掘金摸鱼的时候看到了一个题第题搜索如何防抖，如何处理中文输入，感觉挺有意思的。测试地址事件输入法事件输入法的第一个字母时触发。输入法状态输入内容。输入法选择之后触发。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我...

BDEEFE 2019-08-02 15:09 评论0 收藏0
FCC 成都社区·前端周刊第 11 期

摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

lentrue 2019-08-22 17:01 评论0 收藏0
FCC 成都社区·前端周刊第 11 期

摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

NusterCache 2019-08-29 15:17 评论0 收藏0