微信小程序怎样设置textarea文本域输入？

解决微信小程序怎样设置textarea文本域输入的步骤如下:

1.第一步，打开微信小程序开发工具，在指定的wxml文件中插入一个textarea组件，设置最大长度、失去焦点事件等。

2.第二步，在界面对应的JavaScript文件，添加失去焦点事件，并获取文本域文字内容。

3.第三步，接着保存代码并在模拟器中预览界面显示效果，可以看到一个文本域。

4.第四步，在文本域组件中输入相应的文字内容，尽可能输入多的内容。

5.第五步，接着在浏览器的控制台下方，查看打印的结果值，跟文本域中的一致。

6.第六步，最后再输入其他的文字内容，由于限制了文本域的最大输入长度，边输入边查看结果。这样就解决了微信小程序怎样设置textarea文本域输入的问题了。

输入代码

<textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />

就可以设置了。

微信小程序 textarea 不可行的原因和简易解决方案

微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。

虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入值。

解决方法：结合from表单，textarea文本框输入后，再去点击提交按钮，这时会先执行textarea事件（获取文本框输入内容），再去执行数据提交，这样问题就解决了。

2.wxml文件代码

3.js文件代码

1.做小程序表单的时候上下要对齐一个文本域和input输入框，没想到小程序的textarea在android和ios上差距这么明显，如下图，本来之前遇到这个问题的时候，设置了margin和padding之后就解决了，但是在小程序上发现设置padding和margin设置为0也没用，还是去不掉android和ios表现不一的问题，于是研究了一番还是给收拾好了，下面先上问题图：

从上面两图可以看出来这个文本域差别也太大了，这效果要是说一样的话也太牵强了，于是调整了下margin、padding的，发现并没有什么用，而且这个textarea的间距在ios上大的有点离谱了，即使android和ios不要求一样，但是单一个ios上面的间距也是明显的大，难看，好，下面写下自己的解决办法，先上两张效果图 ：

下面写实现过程：

js文件:

Page({

  data: {

    detail:false,

  },

  onLoad: function (options) {

    var phone = wx.getSystemInfoSync()  //调用方法获取机型

    var that = this

    if (phone.platform == 'ios') {

      that.setData({

        detail: true

      })

    } else if (phone.platform == 'android') {

      that.setData({

        detail: false

      })

    }

  },

  onReady: function () {

  },

  onShow: function () {

  },

  onHide: function () {

  },

  onUnload: function () {

  },

  onPullDownRefresh: function () {

  },

  onReachBottom: function () {

  },

  onShareAppMessage: function () {

  }

})

wxml文件：

<view class='xingdongDescript'>

<view class='xingdongNameBox'><view>行动名称</view><input placeholder='请输入' /></view>

<view class='xingdongjieshaoBox'><view class='xingdongjieshao'>行动介绍</view><view class="{{detail ? 'iostextarea'  : 'androidtextarea'}}"><textarea placeholder='请输入' /></view></view></view>

wxss文件：

.xingdongDescript{

  background: white

  padding: 0 0 0 30rpx

  box-sizing: border-box

  width: 100%

  height: 285rpx

}

.xingdongNameBox{

  width: 100%

  height: 88rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  border-bottom: 1rpx solid #E5E5E5

}

.xingdongNameBox view{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

}

.xingdongNameBox input{

  width: 75%

  height: 88rpx

  line-height: normal

  float: left

  font-size: 34rpx

  color: #000000

}

.xingdongjieshaoBox{

  width: 100%

  height: 197rpx

  overflow: hidden

  padding: 0 20rpx 0 0

  box-sizing: border-box

  position: relative

}

.xingdongjieshaoBox .xingdongjieshao{

  width: 25%

  height: 88rpx

  line-height: 88rpx

  float: left

  color: #000000

  font-size: 34rpx

  position: absolute

  top: 0

  left: 0

}

.iostextarea{

  position: absolute

  left: 24.3%

  top: 1rpx

  margin-left: -11rpx

  width: 73%

  height: 197rpx

}

.iostextarea textarea{

  position: absolute

  width: 100%

  height: 100%

  font-size: 34rpx

}

.androidtextarea{

  position: absolute

  left: 24.3%

  width: 73%

  height: 197rpx

}

.androidtextarea textarea{

  width: 100%

  height: 197rpx

  float: left

  padding: 22rpx 0 0 0

  box-sizing: border-box

  font-size: 34rpx

}

至此，实现想要的效果。

---