阅读 146

vue inpute textarea 支持录入tab键,以及在input光标后追加内容

遇到一个需求 需要在textarea中支持tab键的输入 在这里插入图片描述

但是在浏览器中,默认tab键是自动聚焦在下一个可以聚焦的元素上 思路如下: input中接收到tab键时,阻止默认事件 在input中获取到光标位置,在后面加一个 \t 制表符 input获取焦点

代码如下

<el-form-item label="活动名称">
  <el-input
    id="myinput"
    type="textarea"
    v-model="form.content"
    :autosize="{minRows:9,maxRows:9}"
    @keydown.9.native.prevent="tabFunc"
    ref="inputVal"></el-input>
</el-form-item>
复制代码
insertInputTxt (id, insertTxt) {
    var elInput = document.getElementById(id)
    var startPos = elInput.selectionStart
    var endPos = elInput.selectionEnd
    if (startPos === undefined || endPos === undefined) return
    var txt = elInput.value
    var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
    elInput.value = result
    elInput.focus()
    elInput.selectionStart = startPos + insertTxt.length
    elInput.selectionEnd = startPos + insertTxt.length
},
tabFunc () {
    console.log(111)
    this.insertInputTxt('myinput', '\t')
},
复制代码

insertInputTxt 参考了 segmentfault.com/q/101000001… 感谢

文章分类
前端
文章标签