妙博客

主机评测 香港服务器 洛杉矶VPS测评

html 让textarea支持tab键输入,而不是切换焦点

这个函数可以解决,

function initTextAreaTab(textarea, spaceCount = 8){
        var func = function(e){
                if(event.code !== "Tab") return true;
            
                event.preventDefault();
            
                let start = this.selectionStart;
                let end = this.selectionEnd;
                var indent = '';
                for(var i = 0; i < spaceCount; i++){indent += ' ';}
            
                if(start === end){
                    document.execCommand('insertText',false,indent);
                }
                else {
                    let strBefore = this.value.slice(0, start);
                    let curLineStart = strBefore.includes('\n') ? strBefore.lastIndexOf('\n') + 1 : 0;
                    let strBetween = this.value.slice(curLineStart, end + 1);
                    let newStr = "  " + strBetween.replace(/\n/g, '\n  ');
                    let lineBreakCount = strBetween.split('\n').length;
                    let newStart = start + 2;
                    let newEnd = end + (lineBreakCount + 1) * 2;
            
                    this.setSelectionRange(curLineStart, end);
                    document.execCommand("insertText", false, newStr);
                    this.setSelectionRange(newStart, newEnd);
                }
            };
            
            $(textarea).off(func);
            $(textarea).on('keydown', func);
}

用法如下:

initTextAreaTab(document.getElementById('textarea1'));

默认是8空格缩进,如果想改为4空格,只要第二个参数改为4即可:

initTextAreaTab(document.getElementById('textarea1'), 4);


Copyright Your 142132.com Rights Reserved. 赣ICP备17010829号-2