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

 更新时间:2016年12月05日 14:27:19   作者:鲍守营  
这篇文章主要介绍了微信小程序 textarea 详解及简单使用方法的相关资料,这里附有实现实例代码,及解决textarea没有bindchange事件,无法在输入时给变量赋值的方法, 需要的朋友可以参考下

微信小程序 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 中的文档对象模型 DOM

    JavaScript 中的文档对象模型 DOM

    DOM,即文档对象模型,前端开发工程师必学的基础知识,在本文将介绍如何在 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件,需要的朋友可以参考一下
    2021-10-10
  • 前端AI机器学习在浏览器中训练模型

    前端AI机器学习在浏览器中训练模型

    这篇文章主要为大家介绍了前端AI机器学习在浏览器中训练模型的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序 template模板详解及实例代码

    微信小程序 template模板详解及实例代码

    这篇文章主要介绍了微信小程序 template模板详解及实例代码的相关资料,需要的朋友可以参考下
    2017-03-03
  • 微信小程序 五星评分的实现实例

    微信小程序 五星评分的实现实例

    这篇文章主要介绍了微信小程序 五星评分的实现实例的相关资料,这里提供实现实例帮助大家实现改功能,需要的朋友可以参考下
    2017-08-08
  • JavaScript内置对象介绍

    JavaScript内置对象介绍

    这篇文章主要介绍了JavaScript内置对象,内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能,下面我们一起进入文章了解更多详细内容
    2021-12-12
  • 原生js实现鼠标滑过播放音符方法详解

    原生js实现鼠标滑过播放音符方法详解

    本文使用原生js的AudioContext接口实现一个划过菜单播放天空之城的鼠标特效,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • ant-design的upload组件中实现粘贴上传实例详解

    ant-design的upload组件中实现粘贴上传实例详解

    这篇文章主要为大家介绍了ant-design的upload组件中实现粘贴上传实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序 合法域名校验出错详解及解决办法

    微信小程序 合法域名校验出错详解及解决办法

    这篇文章主要介绍了微信小程序 合法域名校验出错详解及解决办法的相关资料,需要的朋友可以参考下
    2017-03-03
  • 前端项目中监听localStorage的变化

    前端项目中监听localStorage的变化

    这篇文章主要为大家介绍了前端项目中监听localStorage的变化的解决思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 微信小程序 时间格式化(util.formatTime(new Date))详解

    微信小程序 时间格式化(util.formatTime(new Date))详解

    这篇文章主要介绍了微信小程序 时间格式化(util.formatTime(new Date))详解的相关资料,这里附实例,一目了然很容易解决,需要的朋友可以参考下
    2016-11-11

最新评论