美文网首页
微信小程序textArea输入框随着输入字数自适应高度

微信小程序textArea输入框随着输入字数自适应高度

作者: IT路上奋斗的小孩 | 来源:发表于2018-12-07 16:38 被阅读0次

wxml文件内容

<form bindsubmit='commentSubmit'>
  <view class='text_box'>
    <textarea fixed='true' contenteditable="true" contenteditable="true" auto-height="true" class='weui-textarea' name='commentValue' placeholder='评论' placeholder-style='font-size:30rpx;' maxlength='50' style='background-color: white'></textarea>
  </view>
  <button form-type='submit' class='textarea_btn'>发送</button>
</form>

fixed='true' 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true
contenteditable="true" 是否自动增高,设置auto-height时,style.height不生效
placeholder-style 指定 placeholder 的样式
placeholder 输入框为空时占位符
wxss文件内容

/* pages/textareaAutoheight/textareaAutoheight.wxss */      
.text_box {
  background-color: white;
  width: 544rpx;
  border-radius: 10rpx;
  border: 1px solid #e9e9e9;
  padding-left: 28rpx;
  font-size: 30rpx;
  padding-top: 8rpx;
}
.text_box .weui-textarea {
  width: 528rpx;
  padding-left: 32rpx;
  padding: 6rpx 0;
  border-radius: 12rpx;
}
.textarea_btn {
  width: 96rpx;
  height: 60rpx;
  font-size: 30rpx;
  padding: 0;
  line-height: 60rpx;
  background-color: #f7ab21;
  color: white;
}

相关文章

网友评论

      本文标题:微信小程序textArea输入框随着输入字数自适应高度

      本文链接:https://www.haomeiwen.com/subject/dbnthqtx.html