微信小程序中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 ...
随机推荐
-
ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程
环境:OS X 10.10.5 + JDK 1.8 步骤: 一.下载ELK的三大组件 Elasticsearch下载地址: https://www.elastic.co/downloads/elast ...
-
Code First Migrations: Making __MigrationHistory not a system table
https://blog.oneunicorn.com/2012/02/27/code-first-migrations-making-__migrationhistory-not-a-system- ...
-
从"; ThinkPHP 开发规范 ";看 PHP 的命名规范和开发建议
稍稍水一篇博客,摘抄自Think PHP 的开发规范,很有引导性,我们可以将这些规范实践到原生 PHP 中. 命名规范 使用ThinkPHP开发的过程中应该尽量遵循下列命名规范: 类文件都是以.cla ...
-
sql server Case when 的用法
sql Case 仅仅返回第一个符合条件的值,剩下的Case部分将会被自动忽略. Case 的使用有两种格式:简单Case函数和Case搜索函数. 简单Case 函数: Case sex when ' ...
-
swift论坛正式上线
www.iswifting.com swift论坛正式上线.有问答专区,也有技术分享区,还有学习资料区,大家一起学习成长! 2014中国互联网大会于8月26日开幕. *主管部门.行业专家.企业领袖将 ...
-
MVC模块化架构
全面解析ASP.NET MVC模块化架构方案 什么叫架构?揭开架构神秘的面纱,无非就是:分层+模块化.任意复杂的架构,你也会发现架构师也就做了这两件事. 本文将会全面的介绍我们团队在模块化设计方面取得 ...
-
模拟实现简化版List迭代器&;嵌入List
1.迭代器(iterators)概念(1)迭代器是一种抽象的设计概念,其定义为:提供一种方法,使他能够按顺序遍历某个聚合体(容器)所包含的所有元素,但又不需要暴露该容器的内部表现方式. (2)迭代器是 ...
-
【可视化】Echarts3图层
默认echarts中canvas组件的z-index等于2,所以如果想让一个块元素如div覆盖echarts组件,需要指定z-index:3或者更大
-
关于vue生命周期
官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...
-
使用cmd命令进行导入
进入cmd直接输入命令 imp 用户名/密码@监听器路径/数据库实例名称 file='d:\数据库文件.dmp' full=y ignore=y 例如: imp mislogin/mislogin@l ...