在触屏(移动端网页)中,聊天室类型的输入框很常见,但是很多都是自定义样式的,直接改造input标签会很麻烦。
- 给div标签设置
contenteditable
属性可以达到input标签的效果还能轻松的自定义样式。
- 利用
input事件
和v-text
可以达到动态绑定“input”输入框的效果
- 利用
focus
和blur
方法可以控制“input”输入框的键盘展开收起
<div contenteditable="true" ref="inputMsg" v-text="inputText" @input="inputDiv($event)" class="input-txt"></div>
// 监听div的input输入框并赋值
inputDiv (e) {
this.resInputVal = e.target.innerText.replace(/[\s\r\n]/g, '').trim();
},
this.inputMsg = this.$refs.inputMsg;
this.inputMsg.blur(); // 自动失去焦点收起键盘
this.inputMsg.focus(); // 自动聚焦展开键盘