微信小程序 textarea 简易解决方案
微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。
虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值,
解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了
wxml文件代码:
<form bindsubmit="evaSubmit">
<textarea name="evaContent" maxlength="500" value="{{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)"bindblur="charChange" />
<button formType="submit" disabled="{{subdisabled}}" class="weui-btn mini-btn" type="primary" size="mini">提交</button>
</form>
js文件代码:
var app = getApp();
Page({
data:{
evaContent : ''
},
onLoad:function(){
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
//事件
textBlur: function(e){
if(e.detail&&e.detail.value.length>0){
if(e.detail.value.length<12||e.detail.value.length>500){
//app.func.showToast('内容为12-500个字符','loading',1200);
}else{
this.setData({
evaContent : e.detail.value
});
}
}else{
this.setData({
evaContent : ''
});
evaData.evaContent = '';
app.func.showToast('请输入投诉内容','loading',1200);
}
},
//提交事件
evaSubmit:function(eee){
var that = this;
//提交(自定义的get方法)
app.func.req('http://localhost:1111/ffeva/complaint?content=''+this.data.evaContent),get,function(res){
console.log(res);
if(res.result==='1'){
//跳转到首页
app.func.showToast('提交成功','loading',1200);
}else{
app.func.showToast('提交失败','loading',1200);
}
});
}
})
缺点:
这样操作后,功能就有缺陷。例如,无法即时获取用户文本框输入字符个数,如果有更好的解决方法,希望能学习一下!
微信小程序 textarea 简易解决方案的更多相关文章
- 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法
微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...
- 关于微信小程序textarea层级过高问题解决
一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡 ...
- 微信小程序实现简易留言板
微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...
- 解决微信小程序textarea 里输入的文字或者是placeholder里的值,飘到弹出view上
在uniapp微信小程序开发中使用textarea,结果发现输入框的问题浮动起来,view无法把他覆盖,设法设置index的值也不生效,所以只能是通过条件v-if或者v-show使其隐藏就可以了
- 强力推荐微信小程序之简易计算器,很适合小白程序员
原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...
- 微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
- 微信小程序 bug及解决方案
1.小程序遮罩滚动穿透问题 解决方案: <view class="mask" wx:if="{{showVipRights}}" catchtap='hi ...
- 微信小程序-制作简易豆瓣笔记
demo截图: 图书: 电影: 共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...
- 解决微信小程序textarea层级太高遮挡其他组件的问题
<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_t ...
随机推荐
- 搜索广告与广告网络Demand技术-探索与利用
探索与利用(Explore and exploit) 点击率预测中还有一个重要的问题,就是探索与利用,它在工程中解决的并不好,我这章把现在论文中的常见的几种方法介绍一下.探索与利用它是所有互联网应用都 ...
- iOS 开发问题集锦(二)
办公机器原来是别人在用,Xcode也是用别人的账号下载的.昨天想升级Xcode的时候,发现没有密码,为了不打扰别人,也为了方便自己之后升级,于是乎把旧版本直接卸载掉,重新下载了全新的4.6版. 下载完 ...
- C#操作AD及Exchange Server总结
C#操作AD及Exchange Server总结 这篇博客的目的:根据亲身项目经历,总结对AD及Exchange Server的操作,包括新建AD用户,设置密码,为AD用户创建邮箱等. 本文完全原创, ...
- win7 安装 sql2000
win7 安装:http://wenku.baidu.com/link?url=xNcfrMaMzX0KgBcjpMaySRaKITM2Op73ZI8sOX49zgl-GWPGB3vqye9gZA_c ...
- solrcloud集群部署
Zookeeper安装 Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成集群模式. 下面将分别进行介绍. 注意防火墙和selinux,关闭后进行如下配置,由于是Java写 ...
- 使用docker搭建kafka环境
Requirements 最近学习了下kafka,为方便搭建环境,使用docker进行部署. 需要首先安装docker的环境.要求操作系统是linux的64位系统. docker的安装(适于rpm/d ...
- Java(多)线程中注入Spring的Bean
问题说明 今天在web应用中用到了Java多线程的技术来并发处理一些业务,但在执行时一直会报NullPointerException的错误,问题定位了一下发现是线程中的Spring bean没有被注入 ...
- quagga源码分析--大内总管zebra
zebra,中文翻译是斑马,于是我打开了宋冬野的<斑马,斑马>作为BGM来完成这个篇章,嘿嘿,小资一把! zebra姑且戏称它是quagga项目的大内总管. 因为它负责管理其他所有协议进程 ...
- shell -- yes or no
read -p "Do you want to .... [Y/N]? " yn while true; do case $yn in [Yy]|[Yy][Ee][Ss] ) br ...
- @Transactional问题记录下
系统中多数据源 在control 层 分别使用不同数据源的service ,有个service 调用相应的dao直接出现表或视图不存在,发现这个service类上加了@Transactional 注 ...