1疯趟、div可以使用contenteditable模擬input框
在vue中爷贫，可以使用v-model實(shí)現(xiàn)組件的雙向綁定励堡，組件中使用v-html顯示值
2、可以給div添加tabindex，使div支持focus和blur事件
3专缠、可以使用css3實(shí)現(xiàn)placeholder
/* 當(dāng)div為空時(shí)涝婉，顯示data-placeholder的值*/
.input-text-placeholder:empty:before {
content: attr(data-placeholder);
color: #cacaca;
}
4、ios無(wú)法輸入問題
可以使用-webkit-user-select: text;解決
.ios-user-select {
-webkit-user-select: text;
}
5、在使用了input事件后引矩，光標(biāo)位置顯示不正常問題
<div
ref="input"
:name="attr"
contenteditable="true"
tabindex="1"
class="input-text ios-user-select input-text-placeholder"
v-html="currentValue"
:data-placeholder="placeholder"
@blur="checkInput"
@input="edit">
</div>
// 監(jiān)聽中文輸入
mounted () {
// 監(jiān)聽中文輸入
const el = this.$refs.input
el.addEventListener('compositionstart', this.onCompositionstart, false)
el.addEventListener('compositionend', this.onCompositionend, false)
},
methods: {
onCompositionstart (e) {
this.isLock = true
},
onCompositionend (e) {
this.isLock = false
},
edit (e) {
// 解決中文輸入的時(shí)候，直接輸出英文字母的問題(中文輸入期間，不允許輸入字符)
setTimeout(() => {
if (this.isLock) return
let value = e.target.innerHTML
// 去除換行符
value = value.replace(/(\<\/?\w*\>)/g, '').replace(/(\r\n)|(\n)/g, '')
this.$emit('input', {
attr: this.attr,
value: value
})
}, 0)
// 如果是pc的話珊燎，timeout設(shè)置為5就好晚吞，ios經(jīng)測(cè)試槽地，使用40才有效果
const timeout = 40
setTimeout(() => {
this.getCursor(e.target)
}, timeout)
},
// 解決光標(biāo)定位問題
getCursor (el) {
if (window.getSelection) {
el.focus()
const sel = getSelection()
sel.selectAllChildren(el)
sel.collapseToEnd()
} else if (document.selection) {
var range = document.selection.createRange()// 創(chuàng)建選擇對(duì)象
range.moveToElementText(el)// range定位到el
range.collapse(false)// 光標(biāo)移至最后
range.select()
}
}
},
beforeDestroy () {
// 清除監(jiān)聽中文輸入
const el = this.$refs.input
el.removeEventListener('compositionstart', this.onCompositionstart, false)
el.removeEventListener('compositionend', this.onCompositionend, false)
}
