收藏
回答

input type=number或者digits时 弹出的键盘会挡住输入框

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug input 微信iOS客户端 6.6.6 1.9.98


问题描述:

当界面有几个type为数字类型的input输入框平行摆放,且位置在页面靠近底部的位置(低于键盘弹起的高度)时,从第一个输入框直接切换至第二个输入框(键盘不收起),弹起的键盘会遮挡住输入框,type类型为text的input不会出现这个问题。

求解决方法。


界面如下图所示:


wxml代码:

<form bindsubmit='submitInfo'>

<view class='list-template'>

<view class='title'>

<view>产品组合view>

<view>层数view>

<view>地上售价(元/㎡)view>

<view>容积率view>

view>

<view class='list'>

<view><input type='text' value='' placeholder='请输入' name = 'productName'>input>view>

<view><input type='number' placeholder='请输入' name = 'floors'>input>view>

<view><input type='number' placeholder='请输入' name='salingPrice'>input>view>

<view><input type='number' placeholder='请输入' name='rate'>input>view>

view>

<view class='list-btn'>

<button form-type='submit'>确定button>

view>

view>

form>


wxss代码:

.list-template{

margin-top: 800rpx;

}

.list-template .title{

background-color: #e5e5e5;

padding: 20rpx 0;

}

.list-template .title,.list-template .list{

overflow: hidden;

}

.list-template .title>view,.list-template .list>view{

float: left;

width: 20%;

text-align: center;

font-size: 34rpx;

line-height: 1;

}

.list-template>view>view:nth-child(3){

width: 40%;

}

.list-template .list{

padding: 20rpx 0;

}

.list-template .list>view:first-child{

line-height: 1.8;

}

.list-btn{

position: fixed;

bottom: 0;

width: 100%;

}

.list-btn>button{

margin-top: 50rpx;

border: 0;

outline: 0;

background: #f60;

color: #fff;

border-radius: 0;

font-size: 34rpx;

}

最后一次编辑于  2018-06-01
回答关注问题邀请回答
收藏

3 个回答

登录 后发表内容