实现输入框换行


应产品要求,实现输入框换行功能,但是传统的input不支持换行操作,故而使用其他方式进行实现。

方式一:contenteditable属性的使用

使用一个div,<div contenteditable="true" id="t"></div>

但是存在问题是如果配合vue的双向绑定会报错

方式二:使用textarea进行模拟,监听内容变化,动态改变其高度

html:

<textarea  class="input-item textarea-item"   placeholder="请输入详细地址"  
      rows="1"  ref="address" 
  @focus="showClearBtn('AddressDetail')" 
  @blur="hideCleanBtn('AddressDetail')"   
  v-model="resObj.address_detail">
</textarea>

JS:

 watch: { 'resObj.address_detail': function (newVal) { this.getHeight(this.$refs.address) }, },
// 详细地址输入框高度
getHeight (el) {
this.timer = setTimeout(() => {
el.style.height = 'auto' // 必须设置为auto
el.style.height = (el.scrollHeight) + 'px'
}, 20)
},

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM