微信小程序中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 简易解决方案的更多相关文章

  1. 微信小程序 textarea的placeholder层级过高 在弹层之上 bug解决方法

    微信小程序textarea的placeholder的层级一直都是一个神坑, 我们是没有办法将我们的弹层加大层级去盖过placeholder的, 所以要解决这个问题只能从另外的角度找思路 我的思路是 : ...

  2. 关于微信小程序textarea层级过高问题解决

    一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡 ...

  3. 微信小程序实现简易留言板

    微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...

  4. 解决微信小程序textarea 里输入的文字或者是placeholder里的值,飘到弹出view上

    在uniapp微信小程序开发中使用textarea,结果发现输入框的问题浮动起来,view无法把他覆盖,设法设置index的值也不生效,所以只能是通过条件v-if或者v-show使其隐藏就可以了

  5. 强力推荐微信小程序之简易计算器,很适合小白程序员

    原文链接:https://mp.weixin.qq.com/s/gYF7GjTRpeZNoKPAPI9aXA 1 概述 前几日QQ群里的朋友问我有没有计算器小程序案例,今天我们说下小程序计算器,然后就 ...

  6. 微信小程序开发简易计算器改进版

    微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...

  7. 微信小程序 bug及解决方案

    1.小程序遮罩滚动穿透问题 解决方案: <view class="mask" wx:if="{{showVipRights}}" catchtap='hi ...

  8. 微信小程序-制作简易豆瓣笔记

    demo截图: 图书:      电影:        共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...

  9. 解决微信小程序textarea层级太高遮挡其他组件的问题

    <view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_t ...

随机推荐

  1. Qt中的串口编程之三

    QtSerialPort 今天我们来介绍一下QtSerialPort模块的源代码,学习一下该可移植的串口编程库是怎么实现的. 首先,我们下载好了源代码之后,使用QtCreator打开整个工程,可以看到 ...

  2. hdu1043-素数回文

    http://acm.hdu.edu.cn/showproblem.php?pid=1431 整体思想可以理解为打表,可以通过如下办法打表(但是相对比较麻烦),还可以直接使用数组,将所有数据直接存储进 ...

  3. Objective-C之run loop详解

    Objective-C之run loop详解 做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一门语言还是需要深 ...

  4. gcc与g++的编译链接的示例详解

    一.编译方式的示例详解 1. 编译C代码 代码如下:main.c /*!  ************************************************************** ...

  5. Springboot 入门之Hello World

    首先使用maven进行包加载和配置,但是你maven一定要配置好,maven的setting.xml文件一定要配置好,不然jar包加载不了的. <project xmlns="http ...

  6. [avalon]data-repeat-rendered循环渲染完毕后的回调函数

    有些时候需要在渲染完毕后,引用其他类似JQ插件的初始化工作.这时候需要使用data-repeat-rendered的回调函数. 应用场景: 在metro-start界面下,需要给每个tile引用cli ...

  7. js动画(二)

    嗯,今天好冷,特别冷,我的手指,都冻的打不了字了.今天一件特别的傻的事就是,在 for(var i;i<obj.length;i++){} 找了半天没有注意到 var i 没有赋值.够150 了 ...

  8. 如何编译Apache Hadoop2.2.0源代码

    转自(原文图片已丢失,本文修复图片,重新排版,并更正部分原文错误):http://www.superwu.cn/2013/12/26/913 欢迎和大家交流技术相关问题: 邮箱: jiangxinnj ...

  9. JS 处理十六进制颜色渐变算法-输入颜色,输出渐变rgb数组

    html颜色有几种表示方式: 英文单词颜色值:background-color:Blue:十六进制颜色值:background-color:#FFFFFF:  RGB颜色值三元数字:backgroun ...

  10. RHEL账号总结一:账号的分类

    账号是一种用来记录单个用户或者多个用户的数据.RHEL中每一个合法的用户都必须拥有账号,才能使用RHEL. 在RHEL上的账号可以分为两类: 用户账号:用来存储单一用户的数据,你也可以使用一个用户账号 ...