zoukankan      html  css  js  c++  java
  • 将字符串插入到光标指定位置-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及以上。

  • 相关阅读:
    mysql表单输入数据出现中文乱码解决方法
    swift实现水仙花数
    Mac终端使用swift REPL异常处理方法
    灰度发布、金丝雀发布,持续集成
    CentOS7.2配置本地yum源
    SNMP 相关检测分支
    Flask 中 @property 和@password.setter 的运用
    Python 数据结构--字典
    Python 数据结构--序列
    网络编程
  • 原文地址:https://www.cnblogs.com/hkdpp/p/8350251.html
Copyright © 2011-2022 走看看