微信小程序——弹出并隐藏键盘（带有输入框，可编辑）

点击按钮唤起键盘并且键盘上带有输入框，点击发送或者空白处可将输入的内容发送到指定的顶部输入框，不理解的可以私聊本人哦！！！

1、编辑好静态文件

.HTML文件
<!-- 点击需要编辑的输入框，“顶部输入框” -->
<view class="editView"><input type="text" placeholder="请输入内容" value="{{inputContent}}" focus="{{focus}}"></input><view class="editBtn" bindtap="clickBtn">编辑</view>
</view>.css文件
<!-- 点击需要编辑的输入框的样式 -->
.editView{width: 100%;height: 110rpx;background-color: rgb(35, 36, 35);display: flex;flex-direction: row;
}
.editView input{width: 580rpx;height: 90rpx;background-color: #fff;line-height: 60rpx;margin: 10rpx 0 10rpx 20rpx;border-radius: 10rpx 0 0 10rpx;padding-left: 20rpx;
}
.editView .editBtn{border-radius: 0 10rpx 10rpx 0;width: 130rpx;height: 90rpx;margin: 10rpx 20rpx 10rpx 0;text-align: center;align-self: center;background-color: rgb(19, 197, 19);line-height: 90rpx;font-weight: 600;color: #fff;font-size: 30rpx;
}

效果图：

2、在“编辑”按钮中加点击事件

.js文件  data: {focus:false,isEdit:false},// 点击得到焦点clickBtn(){this.setData({//当focus为true时，键盘将弹出focus:true,bottom:0,// isEdit:true})},

效果图：

3、编辑要隐藏的输入框

.html文件
<!-- 这个为隐藏的输入框 -->
<view class="input" style="bottom:{{bottom}}px" wx:if="{{isEdit}}"><input id="area-input"  adjust-position="{{false}}" value="{{inputContent}}"bindfocus="foucus"  bindinput='inputTextChange' focus="{{focus}}"bindblur='blur' type="text"></input>
</view>.wxss文件
/* 弹出内容样式 */
.input{position: fixed;left: 0;right: 0;height: 90rpx;}#area-input{background: #2e2d2d; color: #fff;height: 90rpx;font-size: 34rpx;width:710rpx;margin: 0 auto;border-radius: 5px;padding-left: 20rpx;}

效果图：

4、通过弹出事件：bindfocus和隐藏事件：bindblur来实行弹出隐藏

.JS文件//弹出事件foucus: function (e) {var that = this;that.setData({isEdit:true,
//焦点聚集，底部输入框需要被键盘顶起，此时bottom高度就是键盘高度bottom: e.detail.height,});if(e.detail.height==0){//键盘自带发送或回车或换行或空格键，点击收起键盘，此时判断键盘高度为0，则收起键盘，拿到自己输入的值that.setData({isEdit:false,inputContent:e.detail.value,})}},//隐藏事件  此时可以点击除开键盘以外的空白处收起键盘blur:function(e){var that = this;that.setData({//当失去光标时，键盘隐藏，bottom时输入框与键盘的距离，此时为0bottom:0,isEdit:false,//inputContent这是你输入需要的内容后，隐藏键盘，把内容发送给顶部输入框inputContent:e.detail.value,})},

点击“编辑”按钮出现的效果图：

点击“发送”后内容赋值给顶部输入框的效果图：

点击键盘以外的空白处收起键盘，同时复制给顶部输入框的效果图：

注意：【博主会持续更新关于微信小程序的一些小分享，感谢各位的关注，期待未来的更多作品趴】

好了，希望可以帮到你哦！！

微信小程序——弹出并隐藏键盘（带有输入框，可编辑）相关推荐

c语言弹出文本框,微信小程序弹出文本输入框
你应该用点击详情.了解更多! 详情史蒂芬孙 2018-12-19 00:54 0评论 0赞同在微信平台下开发小程序,接口输出的数据应该一致,如果是ios不一致,也应该由基础库去实现详情 Sac ...
微信小程序弹出软键盘
<input focus="auto"/> input组件里的focus属性设置为"auto"自动获取焦点,使得输入框获取焦点时自动弹出软键盘. 当 ...
微信小程序弹出用户授权弹窗，微信小程序引导用户授权，获取位置经纬度
我们在开发小程序时,有些操作必须让用户授权.比如我们获取用户位置,需要用户授权位置信息.授权操作我们需要给用户弹窗提示,在用户禁用某些权限时,又要引导用户去设置页开启相应权限.我们这里就以获取经纬度为 ...
微信小程序弹出框竖向滚动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...
WXML 将整个底层页面使用 scroll-view 包裹起来,设置 scroll-y 当显示弹出层的时候为 true, 闭关弹出层的时候为 false WXSS Page 设置为绝对定位,宽高各百分 ...
小程序中input标签没有反应_解决微信小程序弹出层中input无法聚焦的问题
此处使用的是vant框架解决聚焦问题这里遇到的问题是,在点击搜索框后,设置了弹起的弹出层中van-search的foucs值为true 但是没有起到聚焦效果原因在于弹出框带有一个动画效果,需要在 ...
微信小程序算出很多小数点
微信小程序算出很多小数点原因案例解决结尾原因微信小程序算出很多小数点不是微信的原因,而是js的原因,详情百度即可案例输出一个58*1.6 按照正常的运算,结果应该为92.8,返回的结果 ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
微信小程序身份证号码/手机号隐藏中间几位
在微信小程序中经常会遇到有敏感词或数字需要进行关键字隐藏(如:身份证号码,手机号码和名字等) 一.封装方法 function hiddenStr(str, frontLen, endLen) { // ...
微信小程序走出国门，国际化将指日可待？
最近在全球旅行行业最重要的旅游大展--德国柏林国际旅游博览会(2018 ITB Berlin)上,德国最大的酒店集团MARITIM玛丽蒂姆与腾讯微信达到合作,微信小程序正式向入住MARITIM玛丽蒂姆 ...

微信小程序——弹出并隐藏键盘（带有输入框，可编辑）

1、编辑好静态文件

2、在“编辑”按钮中加点击事件

3、编辑要隐藏的输入框

4、通过弹出事件：bindfocus和隐藏事件：bindblur来实行弹出隐藏

微信小程序——弹出并隐藏键盘（带有输入框，可编辑）相关推荐

最新文章

热门文章