微信小程序 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 相关文章推荐
javascript String 的扩展方法集合
Jun 01 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
javascript实现贪吃蛇小游戏
Jul 28 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
深入PHP数据加密详解
2013/06/18 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
jQuery each()小议
2010/03/18 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python hashlib加密实现代码
2019/10/17 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
阿巴庭院:Abba Patio
2019/06/18 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
中层干部竞聘演讲稿
2014/05/15 职场文书
村容村貌整治方案
2014/05/21 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
社区植树节活动总结
2015/02/06 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL