微信小程序中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. Xcode4.6 开发 metaio 增强现实 项目(二)--增强现实的实现

    经过昨天的一些步骤,我们已经将我们的IOS应用的基本界面搭建好,下面我们将开始新的征程:增强现实技术的实现: 进入webView后,我们要选用我们这次需要用的nib文件,它是一个家居摆放应用的界面文件 ...

  2. [APUE]进程控制(中)

    一.wait和waitpid函数 当一个进程正常或异常终止时会向父进程发送SIGCHLD信号.对于这种信号系统默认会忽略.调用wait/waidpid的进程可能会: 阻塞(如果其子进程都还在运行); ...

  3. MyEclipse导入Maven项目pom文件第一行报错,运行Tomcat报Log4j错误--解决方法

    问题描述: 前一段时间电脑第一次导入Maven项目,又是pom文件错,改好后又是运行Tomcat报Log4j错误,一直倒腾了近一个月程序才成功跑起来,太不容易. 也上网查了很长时间,没一个方法能解决我 ...

  4. Node.js中读取文件后用Json.parse方法报错

    今天,在调试一个node项目时,发现了一个很大的坑,在此分享给大家! 大家都知道,Json.parse()方法对格式要求是很严格的,格式不对极其容易报错,但是有时候格式看似是正确的也会报错. 比如这一 ...

  5. 【Java每日一题】20170111

    20170110问题解析请点击今日问题下方的"[Java每日一题]20170111"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  6. Linux中top和free命令详解(转)

    top:命令提供了实时的对系统处理器的状态监视.它将显示系统中CPU最"敏感"的任务列表. 该命令可以按CPU使用.内存使用和执行时间对任务进行排序: 而且该命令的很多特性都可以通 ...

  7. 解决,Incorrect table definition; there can be only one auto column and it must be defined as a key

    今天在迁移项目时,操作数据库报错: Incorrect table definition; there can be only one auto column and it must be defin ...

  8. UVALive 7141 BombX

    离散化,线段树.$2014$年$ACM/ICPC$亚洲区域赛上海站$D$题. 可以处理出炸任意相邻的$h$行能消灭的点的数量,以及炸任意相邻的$w$列能消灭的点的数量,分别用$py[i]$和$px[i ...

  9. jq 测试是否到页面最底端

    $(window).scroll(function () { if ($(document).scrollTop() + $(window).height() >= $(document).he ...

  10. Unity中的Mathf类

    Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...