将字符串插入到光标指定位置-js

时间:2023-01-03 09:53:11

需求

最近做项目遇到这样一需求,如图所示

将字符串插入到光标指定位置-js

单击下面两个表格的数据,就会把行数据给插入到上面的文本域里,默认情况下,就是点击一次就往文本域里最后追加字符串。如图点击凭证类型,文本域里就会出现凭证类型4个字,再次点击肯定是往后面继续追加。但是实际需求不是这样的,如下图

将字符串插入到光标指定位置-js

我如果把光标放在“+”的后面,那么再次点击表格的时候就得是把字符串插入到光标的位置,而不是在字符串的末尾去追加。

实现以上功能的代码如下:

/**
 * 将字符串插入到光标指定位置
 * @param str - 要插入的字符串
 */
function insertNode(str){  
    var tc = document.getElementById("textarea_1005");  
    var tclen = tc.value.length;  
   // tc.focus();  
    var startlength = 0;
    if(typeof document.selection != "undefined")  
    {  
        //IE9浏览器
        tc.focus();    
        var start = tc.selectionStart;
        document.selection.createRange().text = str;
        tc.focus();
        if(tc.setSelectionRange) {
            tc.focus();
            var pos = start + str.length;
            tc.setSelectionRange(pos, pos);
            tc.selectionStart = pos;
           }
    }  
    else  if(tc.selectionStart || tc.selectionStart == '0'){//IE11
        //火狐和谷歌
        startlength = tc.selectionStart + str.length;
        tc.value = tc.value.substr(0,tc.selectionStart)+str+tc.value.substring(tc.selectionEnd,tclen); 
        //设置光标位置,火狐和谷歌
        tc.selectionStart=startlength;
        tc.selectionEnd=startlength;
    }
    else {
        tc.value += str;
        tc.focus();
    }
}  

注意:浏览器的兼容问题是个恶心的事情,以上亲测支持谷歌、火狐、ie8及以上。