在开发微信小程序的时候遇到，输入用户名或者手机号以及地址，手机键盘调起来，会把输入框遮挡。

如图：

以上两张图是自己工作中遇到的，此处不要着急，一个属性帮你搞定。

cursor-spacing：指定光标与键盘的距离，单位px或rpx，默认为px。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

微信小程序开发文档api:

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

最终呢，就解决输入框被遮挡问题喽！

源：

https://my.oschina.net/hp2017/blog/1819169?from=singlemessage&isappinstalled=0

微信小程序 - 弹出键盘遮挡住输入框的更多相关文章

  1. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  2. 微信小程序弹出层点击穿透问题

    问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: < ...

  3. 使用movable-view制作可拖拽的微信小程序弹出层效果。

    仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照 ...

  4. 微信小程序弹出可填写框两种方法

    方法一: html页面: < view class = "container" class = "zn-uploadimg" > < butt ...

  5. 微信小程序弹出层

    1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.show ...

  6. 微信小程序弹出层动画特效

    .rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: sho ...

  7. 微信小程序弹出和隐藏遮罩层动画以及五星评分

    参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...

  8. 微信小程序 - 弹出层组件

    需要的可以下载示例:maskalert

  9. 微信小程序弹出框滚动穿透问题

    1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { c ...

随机推荐

  1. [转] Elasticsearch 6.1官方入门教程

    一篇比较简要又全面的elasticsearch教程. https://blog.csdn.net/hololens/article/details/78932628

  2. （转）.NET技术大系概览 （迄今为止最全的.NET技术栈）

    前言 .Net推出13年了,Visual Studio 2015 / .NET Framework 4.6昨天也发布了. 从2002年的.NET 1.0开始,1.1,2.x,3.x,4.x,每个新版本 ...

  3. C# this关键字(给底层类库扩展成员方法)

    本文参考自唔愛吃蘋果的C#原始类型扩展方法—this参数修饰符,并在其基础上做了一些细节上的解释 1.this作为参数关键字的作用 使用this关键字,可以向this关键字后面的类型添加扩展方法,而无 ...

  4. js跳出循环：break 、continue 、return

    js跳出循环:break .continue .return 本文虽然讲的是js里跳出循环的方法,但是jquery其实就是在js的基础上封装而来的,所以一些js里的语法应用,在jquery里也是通用的 ...

  5. 《LeetBook》leetcode题解(13):Roman to Integer[E]

    我现在在做一个叫<leetbook>的免费开源书项目,力求提供最易懂的中文思路,目前把解题思路都同步更新到gitbook上了,需要的同学可以去看看 书的地址:https://hk029.g ...

  6. SharePoint 2013的REST编程基础

    1. SharePoint 2013对REST编程的支持 自从SharePoint2013开始, SharePoint开始了对REST 编程的支持,这样除了.NET , Silverlight, Po ...

  7. android studio不能预览

    错误:Failed to load the LayoutLib: com/android/layoutlib/bridge/Bridge : Unsupported major.minor versi ...

  8. PHP的一些语句 if...else...elseif - Switch - while - for

    条件语句用于基于不同条件执行不同的动作 PHP 条件语句 在您编写代码时,经常会希望为不同的决定执行不同的动作.您可以在代码中使用条件语句来实现这一 点. 在 PHP 中,我们可以使用以下条件语句: ...

  9. C# HttpHelper

    public enum HttpVerb { Get, Post } public class HttpHelper { private string _contentType = "app ...

  10. JavaScript ES6 Symbol.hasInstance的理解。

    Symbol.hasInstance 本案例是结合阮一峰老师的ECMAScript 6 入门丛书进一步的详细介绍,和对Symbol.hasInstance的理解.本着互联网的精神,分享给大家. 对象的 ...