微信小程序HotApp云笔记开发问题总结 之textarea不能实时保存及里面的值的获取的问题？...

先上图

实现功能： 1、编辑修改标题和内容 2、将用户输入的内容和标题保存到本地缓存 3、删除内容

在使用textarea作为输入框的过程中发现textarea只支持 获取焦点、失去焦点和输入框行数变化等事件，并且只有在触发这几个事件之后才能获得textarea 里的内容 ，使得实时保存数据无法实现.

所以退而求其次，增加一个保存按钮，点击按钮时保存标题和内容，又因微信的表单没有实现数据双向绑定的功能

所以研究出了2种方法来实现:

1.给textarea 增加失去焦点事件，点击按钮后让textarea的focus=’false’ 失去焦点 给textarea 绑定focus

<!--/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/-->
<!--index.wxml-->
<view class="container">
    <view class='title'><input name="title" placeholder-class="placeholder" placeholder="在此输入标题（可选）" value="{{item.value.title}}" /></view>
    <view class='row'>
        <textarea class='text' bindblur="bindTextAreaBlur" placeholder-class="placeholder"  name="content" focus="{{focus}}" value="{{item.value.content}}" placeholder="点击添加文本" />
    </view>
    <view class='bottom'>
        <button bindtap="submit" class='btn success'>保存</button>
    </view>
</view>

js代码

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/
var app = getApp();
Page({
    data: {
        item: ' ',
        focus: true
    }
});

失去焦点后保存内容的事件

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/
var app = getApp();
Page({
    data: {
        item:' ',',
        isNew: false,
        focus: true
    },
    setBlur:function(event){
         this.setData({
             focus: false
        });
    }
    /**
     * 保存数据事件
     */
    bindTextAreaBlur: function(event) {
        var item = this.data.item;
        item.value.content = event.detail.value.content;
        this.setData({
            item: item
        });
    }
});

2.使用input输入框模拟textarea 给input绑定bindinput 来实时修改内容，让后点击保存提交内容。

WXML

<!--/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/-->
<!--index.wxml-->
<view class="container">
    <view class='title'><input name="title" placeholder-class="placeholder" placeholder="在此输入标题（可选）" value="{{item.value.title}}" /></view>
    <view class='row'>
        <input class='text' bindinput="bindkeyinput" placeholder-class="placeholder"  name="content" focus="{{focus}}" value="{{item.value.content}}" placeholder="点击添加文本" />
    </view>
    <view class='bottom'>
        <button bindtap="submit" class='btn success'>保存</button>
    </view>
</view>

JS:

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/
var app = getApp();
Page({
    data: {
        item:' ',',
        isNew: false,
        focus: true
    },
    setBlur:function(event){
         this.setData({
             focus: false
        });
    }
    /**
     * 保存数据事件
     */
    bindkeyinput: function(event) {
        var item = this.data.item;
        item.value.content = event.detail.value.content;
        this.setData({
            item: item
        });
    }
});

通过实际操作发现2种方法都不完美，

方法1在实际使用过程种发现要执行失去焦点事件前textarea必须先取到焦点，并且不断的失去焦点就会不断保存。

方法2因为是input模拟的 textarea 会出现内容不会换行，所有的内容都排在一行。

虽然方法2可以通过如下方法变通实现：

设置一个view然后把它模拟成textarea的样子出来，在通过input标签 的bindKeyInput事件将输入同步到view中，最后给view绑定事件个 bindButtonTap设置focus属性值，并把input隐藏。

但是通过变通方法来实现后会出现模拟的textarea没有光标效果，并且开发工具是不会支持focus ，所以开发工具上没法调试

最后经过测试发现form的submit事件可以提交input和textarea，然而官方文档并没有写，

所以重新修改代码。

最后实现的效果是 点击保存按钮提交表单执行submit事件 然后取到textarea的内容， 在执行保存事件，将内容提交到缓存里。

WXML

<!--/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/-->
<!--index.wxml-->
<form bindsubmit="onSubmit" bindreset="">
<view class="container">
    <view class='title'><input name="title" placeholder-class="placeholder" placeholder="在此输入标题（可选）" value="{{item.value.title}}" /></view>
    <view class='row'>
        <textarea class='text' placeholder-class="placeholder"  name="content" focus="{{focus}}" value="{{item.value.content}}" placeholder="点击添加文本" />
    </view>
    <view class='bottom'>
        <button formType="submit" class='btn success'>保存</button>
    </view>
</view>
</form>

/*
***HotApp云笔记，基于HotApp小程序统计云后台
***免费云后台申请地址 https://weixin.hotapp.cn/cloud
***API 文档地址：https://weixin.hotapp.cn/api
***小程序技术讨论QQ群：173063969
*/
var app = getApp();
Page({
    data: {
        item: ' ',
        isNew: false,
        focus: true
    },
    /**
     * 保存数据事件
     */
    onSubmit: function(event) {
        var item = this.data.item;
        item.value.title = event.detail.value.title;
        item.value.content = event.detail.value.content;
        this.setData({
            item: item
        });
    }
});

*HotApp云笔记，基于HotApp小程序统计云后台

*免费云后台申请地址 https://weixin.hotapp.cn/cloud

*API 文档地址：https://weixin.hotapp.cn/api

*小程序技术讨论QQ群：173063969

转载于:https://my.oschina.net/u/3073834/blog/807596