微信小程序之input组件:真机键盘弹窗遮盖输入框一部分或遮住输入框样式
2018-09-01 15:44
417 查看
版权声明:本文为博主原创文章,转载请注明原创链接,感谢支持!(如文章有侵权,请联系作者删除) https://blog.csdn.net/qq_35324453/article/details/82287760
但是我尝试了好几次设置都没有什么作用效果,有点悲催,可能我没有get到这个属性的点。
没办法,只能使用自己的办法了:
使用
遇到了一个比较常见,但不注意就会犯错的问题:小程序里面经常会用到组件input,属性也很丰富,如果在页面排版中,将输入固定在底部作为评论之类的,可能就会遇到一个问题,在真机上测试(移动端),点击input组件默认会将键盘弹起时,自动上推页面,就会发现,因为弹窗很容易遮住input组件相关的内容及样式。
(一)问题详情
1、默认没有点击input输入框(评论框)的时候:
2、点击input输入框(评论框)的时候:
(二)问题分析
注意:这个是input组件在页面底部的时候,input在页面其他位置可能效果是不一样的。
这个是因为点击了input组件,键盘弹起时,自动上推页面,默认键盘弹窗弹出到位置是input组件输入聚焦位置(就是输入框的光标一直闪烁的位置);所以就是没有设置input组件和键盘的位置距离导致的覆盖相关样式现象。
(三)解决方法
1、查找了一些网上资料说可以设置
cursor-spacing的属性距离。
但是我尝试了好几次设置都没有什么作用效果,有点悲催,可能我没有get到这个属性的点。
没办法,只能使用自己的办法了:
使用
bindfocus、
bindblur操作函数来动态设置底部组件框与底部之间的距离(外边距):
margin-bottom:50rpx;
解决问题流程:
- js data里面设置一个变量:
inputMarBot: false, //评论框聚焦时,让评论框距离底部的距离为50rpx
- wxml 页面:使用三元表示设置style input组件的父元素容器与底部外边距:
<view class='write-comment' style="{{inputMarBot?'margin-bottom:50rpx':''}}">
(关键,主要跟input的聚焦和是去焦点有关)及input组件定义属性:bindfocus='settingMbShow' bindblur='settingMbNoShow'
- js 定义聚焦和是去焦点函数:
// 评论输入框聚焦时,设置与底部的距离 settingMbShow: function () { this.setData({ inputMarBot: true }) }, // 评论输入框失去聚焦时,设置与底部的距离(默认状态) settingMbNoShow: function () { this.setData({ inputMarBot: false }) },
实现效果:
如果还有其他实现可行方法,欢迎留言交流。
阅读更多相关文章推荐
- 微信小程序picker组件下拉框选择某个值动态添加input输入框
- 微信小程序picker组件下拉框选择input输入框的实例
- 微信小程序picker组件下拉框选择input输入框的实例
- 微信小程序之MaterialDesign--input组件详解
- 微信小程序---获取输入框(input)内容
- 微信小程序把玩(十七)input组件
- 微信小程序开发中的一些问题总结,无法跳转,input组件变高等
- 微信小程序中的input组件
- 第十一篇、微信小程序-input组件
- 微信小程序---点击按钮添加、删除输入框(input)
- js判断input输入框为空时遇到的问题 弹窗后,光标没有定位到输入框,而是直接执行我的处理页面程序
- 微信小程序——input组件
- 微信小程序 input输入框控件详解及实例(多种示例)
- 微信小程序中多个button/view组件中进行切换时改变样式
- 微信小程序:input输入框和form表单几种传值和取值方式
- 微信小程序之Material Design——input组件
- 微信小程序例子——使用input组件实现密码框
- iOS开源组件__仿写QQ/微信聊天键盘(表情,问题,输入框)纯代码,无依赖
- 微信小程序 (十七)input 组件详细介绍