alt+elter获取焦点实现换行并设置光标位置

按enter发送消息，alt+enter换行

html

<textarea  v-model="editAreaCtn"  @keydown="enterSend"></textarea>

enterSend(e){          
    var e = e || window.event, ec = e.keyCode || e.which;
    if (!e.altKey && 13 == ec) {       
        e.cancelBubble=true;
        e.preventDefault();
         e.stopPropagation();
        this.sendTextMessage(this.editAreaCtn);
        return false;
    }
    if (e.altKey && 13 == ec) {
        e.cancelBubble=true;
        e.preventDefault();
        e.stopPropagation();  
        //获取光标位置           
        this.getCursorPosition();
        this.editAreaCtn =  this.editAreaCtn.slice(0, this.start)+"\n"+this.editAreaCtn.slice(this.end);
        let chatbox = document.querySelector("textarea");
        this.setCursorPosition(chatbox, this.start+1); 
        return false;
    }
},
// 获取光标位置
getCursorPosition() {  
    var isIE = !(!document.all);
    var start = 0, end = 0;
    var oTextarea = document.querySelector("textarea");
    if (isIE) {
        //selection 高亮文本块，和/或文当中用户可执行某些操作的其它元素。
        //createRange 从当前文本选中区中创建 TextRange 对象，  
        //或从控件选中区中创建 controlRange 集合。  
        var sTextRange = document.selection.createRange();
        //判断选中的是不是textarea对象  
        if (sTextRange.parentElement() == oTextarea) {
            //创建一个TextRange对象  
            var oTextRange = document.body.createTextRange();
            //范围的开始和结束位置能够完全包含给定元素的文本。  
            oTextRange.moveToElementText(oTextarea);
            //此时得到两个 TextRange  
            //oTextRange文本域(textarea)中文本的TextRange对象  
            //sTextRange是选中区域文本的TextRange对象  
            //compareEndPoints方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置  
            //StartToEnd  比较TextRange开头与参数TextRange的末尾。  
            //StartToStart比较TextRange开头与参数TextRange的开头。  
            //EndToStart  比较TextRange末尾与参数TextRange的开头。  
            //EndToEnd    比较TextRange末尾与参数TextRange的末尾。  
            //moveStart方法介绍，更改范围的开始位置  
            //character 按字符移动  
            //word       按单词移动  
            //sentence  按句子移动  
            //textedit  启动编辑动作  
            //比较oTextRange和sTextRange的开头到选中区域的开头位置  
            for (start = 0; oTextRange.compareEndPoints("StartToStart", sTextRange) < 0; start++) {
                oTextRange.moveStart('character', 1);
            }
            //计算一下\n的数目(按字符移动的方式不计\n,这里加上)   
            for (var i = 0; i <= start; i++) {
                if (oTextarea.value.charAt(i) == '\n') {
                    start++;
                }
            }
            //再计算一次结束的位置  
            oTextRange.moveToElementText(oTextarea);
            for (end = 0; oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0; end++) {
                oTextRange.moveStart('character', 1);
            }
            for (var i = 0; i <= end; i++) {
                if (oTextarea.value.charAt(i) == '\n') {
                    end++;
                }
            }
        }
    } else {
       start = oTextarea.selectionStart;
       end = oTextarea.selectionEnd;
    }   
    this.start = start;
    this.end = end;   
}, 
//设置光标位置
setCursorPosition(elem, index) {
    var val = elem.value
    var len = val.length
    // 超过文本长度直接返回
    if (len < index) return
        setTimeout(function() {
        elem.focus()
        if (elem.setSelectionRange) { // 标准浏览器
            elem.setSelectionRange(index, index)   
        } else { // IE9-
            var range = elem.createTextRange()
            range.moveStart("character", -len)
            range.moveEnd("character", -len)
            range.moveStart("character", index)
            range.moveEnd("character", 0)
            range.select()
        }
    }, 10)
},

最后编辑于：2018.09.21 10:41:32