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


    需求

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

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

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

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

    /**
     * 将字符串插入到光标指定位置
     * @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及以上。

  • 相关阅读:
    luogu P3704 [SDOI2017]数字表格
    「雅礼集训 2018 Day4」Magic(分治NTT)
    「清华集训 2017」小 Y 和恐怖的奴隶主
    [WC2019]数树(树形dp+多项式exp)
    「FJWC2020Day5-zzq」lg (容斥)
    BoundedOptimization TopCoder
    MapGuessing TopCoder
    线性递推(Berlekamp-Massey 算法)
    杜教筛小记
    「余姚中学 2019 联测 Day 6」解码
  • 原文地址:https://www.cnblogs.com/hkdpp/p/8350251.html
Copyright © 2020-2023  润新知