微信小程序 textarea 详解及简单使用方法


Posted in Javascript onDecember 05, 2016

微信小程序 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);
      }
  });
 }
})

 缺点:

这样操作后,功能就有缺陷。例如,无法即时获取用户文本框输入字符个数,如果有更好的解决方法,希望能学习一下!

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
Ajax执行顺序流程及回调问题分析
Dec 10 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
Sep 01 Javascript
JS常用知识点整理
Jan 21 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
解析Javascript单例模式概念与实例
Dec 05 #Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 #Javascript
深入理解jQuery()方法的构建原理
Dec 05 #Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 #Javascript
浅析Ajax语法
Dec 05 #Javascript
jQuery的事件预绑定
Dec 05 #Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 #Javascript
You might like
php的控制语句
2006/10/09 PHP
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
jquery动态添加删除一行数据示例
2014/06/12 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python中有几个关键字
2020/06/04 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
什么是组件架构
2016/05/15 面试题
领导的自我鉴定
2013/12/28 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
条幅标语大全
2014/06/20 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
瘦西湖导游词
2015/02/03 职场文书
协议书格式模板
2016/03/24 职场文书
linux中nohup和后台运行进程查看及终止
2021/06/24 Python