js實現在光標的位置添加內容

本文轉載自查看原文 2013-08-06 22:13 10684 工作筆記/ JavaScript

原生js的方法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>



<script   type="text/javascript">   
function setCaret(textObj) {
    if (textObj.createTextRange) {
        textObj.caretPos = document.selection.createRange().duplicate();
    }
}
function insertAtCaret(textObj, textFeildValue) {
    if (document.all) {
        if (textObj.createTextRange && textObj.caretPos) {
            var caretPos = textObj.caretPos;
            caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '   ' ? textFeildValue + '   ' : textFeildValue;
        } else {
            textObj.value = textFeildValue;
        }
    } else {
        if (textObj.setSelectionRange) {
            var rangeStart = textObj.selectionStart;
            var rangeEnd = textObj.selectionEnd;
            var tempStr1 = textObj.value.substring(0, rangeStart);
            var tempStr2 = textObj.value.substring(rangeEnd);
            textObj.value = tempStr1 + textFeildValue + tempStr2;
        } else {
            alert("This   version   of   Mozilla   based   browser   does   not   support   setSelectionRange");
        }
    }
}   
 </script>  
   
  <form   id="form1"   action=""   onsubmit=""   method="post"   enctype="text/plain">    
  <p>  
  <textarea   name="tarea"   rows=""   cols=""   style="width:300px;height:120px;"  
  onselect="setCaret(this);"  
  onclick="setCaret(this);"  
  onkeyup="setCaret(this);"   >例子例子例子例子例子</textarea>  
  <br/><br/>  
  <input   type="text"   name="textfield"   style="width:220px;"   value="插入FireFox"/>  
  <br/>  
  <input   type="button"   value="插入"  
  onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>  
  </p>  
  </form>   


<div id="box" contenteditable="true" style="border:1px solid #ccc; width:300px; height:200px;">sljfldjfldf</div>

</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
 
<textarea name="" id="txt1" cols="30" rows="10"    >了在IE、Firefox、Opera等主流瀏覽器的獲取光標位置（getCursortPosition）以及設置光標位置（setCursorPosition）的函數。</textarea><br>

<input type="text" name="" id="txt2">
<input type="button" value="添加" id="btn">

<script type="text/javascript">
window.onload = function(){
    var oTxt1 = document.getElementById("txt1");
    var oTxt2 = document.getElementById("txt2");
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function(){
    getValue("txt1", oTxt2.value);
    }
}
</script>
<script type="text/javascript">
//objid：textarea的id   str：要插入的內容
function getValue(objid,str){
   var myField=document.getElementById(""+objid);
   //IE瀏覽器
     if (document.selection) {
       myField.focus();
       sel = document.selection.createRange();
       sel.text = str;
       sel.select();
     }
   
     //火狐/網景 瀏覽器
     else if (myField.selectionStart || myField.selectionStart == '0')
     {
     //得到光標前的位置
       var startPos = myField.selectionStart;
       //得到光標后的位置
       var endPos = myField.selectionEnd;
       // 在加入數據之前獲得滾動條的高度
       var restoreTop = myField.scrollTop;
       myField.value = myField.value.substring(0, startPos) + str + myField.value.substring(endPos, myField.value.length);
       //如果滾動條高度大於0
       if (restoreTop > 0) {
         // 返回
         myField.scrollTop = restoreTop;
       }
       myField.focus();
       myField.selectionStart = startPos + str.length;
       myField.selectionEnd = startPos + str.length;
     }
     else {
       myField.value += str;
       myField.focus();
     }
   }
</script>


</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>光標控制器</title>  
<script type="text/javascript">
function cursorControl(a){
    this.element=a;
    this.range=!1;
    this.start=0;
    this.init();
};
cursorControl.prototype={
    init:function(){
        var _that=this;
        this.element.onkeyup=this.element.onmouseup=function(){
            this.focus();
            if(document.all){
                _that.range=document.selection.createRange();
            }else{
                _that.start=_that.getStart();
            }
        }
    },
    getType:function(){
        return Object.prototype.toString.call(this.element).match(/^\[object\s(.*)\]$/)[1];
    },
    getStart:function(){
        if (this.element.selectionStart || this.element.selectionStart == '0'){  
            return this.element.selectionStart; 
        }else if (window.getSelection){  
            var rng = window.getSelection().getRangeAt(0).cloneRange();  
            rng.setStart(this.element,0);  
            return rng.toString().length;
        }
    },
    insertText:function(text){
        this.element.focus();  
        if(document.all){
            document.selection.empty();  
            this.range.text = text;  
            this.range.collapse();  
            this.range.select();
        }  
        else{
            if(this.getType()=='HTMLDivElement'){
                this.element.innerHTML=this.element.innerHTML.substr(0,this.start)+text+this.element.innerHTML.substr(this.start);
            }else{
                this.element.value=this.element.value.substr(0,this.start)+text+this.element.value.substr(this.start);
            };
        } 
    },
    getText:function(){
        if (document.all){  
            var r = document.selection.createRange();  
            document.selection.empty();  
            return r.text;  
        }  
        else{  
            if (this.element.selectionStart || this.element.selectionStart == '0'){
                var text=this.getType()=='HTMLDivElement'?this.element.innerHTML:this.element.value;
                return text.substring(this.element.selectionStart,this.element.selectionEnd); 
            } 
            else if (window.getSelection){  
                return window.getSelection().toString()
            };  
        }  
    }
};
var c1,c2;
window.onload=function(){
    c1=new cursorControl(document.getElementById('text'));
    c2=new cursorControl(document.getElementById('editdiv'));
};
function fn1(str){
    c1.insertText(str);
};
function fn2(str){
    c2.insertText(str);
};
function fn3(){
    alert(c1.getText());
};
function fn4(){
    alert(c2.getText());
}     
</script>  
</head>  
<body>  
    <input type = "button" value = "插入字符串 {文本1}" onclick="fn1('{文本1}');"/><input type = "button" value = "獲取選中的文本" onclick="fn3();"/><br />  <br />
    <textarea id="text" cols="50" rows="5">這里是文本框</textarea><br /><br />  
    <input type = "button" value = "插入字符串 {文本2}" onclick="fn2('{文本2}');"/> <input type = "button" value = "獲取選中的文本" onclick="fn4();"/><br />  <br /> 
    <div id="editdiv" contentEditable="true">這里是一個可編輯層</div><br />     
</body>  
</html>

jQuery的方法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 在光標定位的地方插入文字的插件</title>
</head>

<body>

<div class="cont">點擊我</div><br />
<br />

<textarea class="tarea" name="" cols="50" rows="15">
創作、游戲開發、運營管理等領域的精英人才，並擁有國內多家教育科研機構的戰略合作資源。
 
　　聚網科技以“為兒童提供真正健康有益的互聯網產品”為己任，在產品研發過程中，注重將能力教育融入全新的游戲玩法，不斷探索更加受兒童歡迎、更加有益於兒童的多元化娛樂模式，在行業里形成了“銳意進取、不斷創新”的良好形象，也使得公司產品一直在行業內保持
</textarea>



<pre>
主要思路： 
　　當點擊某個元素的時候，讓一個輸入框，插入指定的值。？ 
　　1.當點擊某個元素的時候，應該讓輸入框獲取焦點，因為只有獲得了焦點，才能在里面輸入值； 
　　IE下：document.selection.createRange() 
　　FF下：var start = dthis.selectionStart; 　　 //獲取焦點前坐標 
　　　　　var end =dthis.selectionEnd; 　　 //獲取焦點后坐標 
　　2.獲取當前輸入框焦點的位置 
　　3.將值插入到輸入框焦點的位置; 
　　4.再次獲取焦點；保證光標在輸入框內
</pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//jQuery 插件

(function($){
    $.fn.extend({
        "insert":function(value){
            //默認參數
            value=$.extend({
                "text":"123"
            },value);
            
            var dthis = $(this)[0]; //將jQuery對象轉換為DOM元素
            
            //IE下
            if(document.selection){
                
                $(dthis).focus();        //輸入元素textara獲取焦點
                var fus = document.selection.createRange();//獲取光標位置
                fus.text = value.text;    //在光標位置插入值
                $(dthis).focus();    ///輸入元素textara獲取焦點
                
            
            }
            //火狐下標准    
            else if(dthis.selectionStart || dthis.selectionStart == '0'){
                
                var start = dthis.selectionStart; 
                var end = dthis.selectionEnd;
                var top = dthis.scrollTop;
                
                //以下這句，應該是在焦點之前，和焦點之后的位置，中間插入我們傳入的值
                dthis.value = dthis.value.substring(0, start) + value.text + dthis.value.substring(end, dthis.value.length);
            }
            
            //在輸入元素textara沒有定位光標的情況
            else{
                this.value += value.text;
                this.focus();    
            };
            
            return $(this);
        }
    })
})(jQuery)
</script>

<script type="text/javascript">
$(function(){
    $(".cont").click(function(){
        $(".tarea").insert({"text":"腳本之家"});
    });
});
</script>

</body>
</html>

DIV可編輯框鼠標光標處插入圖片或者文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Language" content="zh-cn" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIV可編輯框鼠標光標處插入圖片或者文字。</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $(".imgbox img").click(function(){
    $("#testdiv").focus();
    var sy = $(".imgbox img").index(this) + 1;
    var img_url = "<img src='faceimg/"+sy+".gif'>";
  
/*此處如果不是插入圖片可這樣：
var img_url = "插入測試的文字";
*/
    _insertimg(img_url);
 
    })
//注：如果要插入的是那種“快捷發言，快捷留言”里的文字，只需把那些文字都分別放在A標簽里即可，然后img_url=a標簽里面的內容。工作中的編輯器終於搞定！能插入圖片和快捷發言和表情圖片等。
})
 
 
//監控粘貼(ctrl+v),如果是粘貼過來的東東，則替換多余的html代碼，只保留<br>
function pasteHandler(){
setTimeout(function(){
var content = document.getElementById("testdiv").innerHTML;
valiHTML=["br"]; 
content=content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, "&nbsp;&nbsp;").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
if(!$.browser.mozilla){
content=content.replace(/\r?\n/gi, "<br>");
}
document.getElementById("testdiv").innerHTML=content;
},1)
  
}
 
//鎖定編輯器中鼠標光標位置。。
function _insertimg(str){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if (!window.getSelection){
document.getElementById('testdiv').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}else{
document.getElementById('testdiv').focus();
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}                                
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
 
//監控按enter鍵和空格鍵，如果按了enter鍵，則取消原事件，用<BR/ >代替。此處還等待修改！！！！！！如果后端能實現各個瀏覽器回車鍵產生的P，div, br的輸出問題話就無需采用這段JS、
function enterkey(){ 
e = event.keyCode; 
if (e==13||e==32) { 
   var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
   event.returnValue = false;  // 取消此事件的默認操作 
   if(document.selection && document.selection.createRange){
    var myRange = document.selection.createRange();
    myRange.pasteHTML('<br />');
    }else if(window.getSelection){
var selection = window.getSelection();
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
var newP = document.createElement('br');
range.insertNode(newP);
}
//alert(document.getElementById("testdiv").innerHTML)
} 
} 
</script>
<style type="text/css">
.editbox{width:400px;height:200px;border:1px solid #000; overflow-x:hidden; overflow-y:auto; outline:none;}
.editbox img{ margin:0 3px; display:inline;}
</style>
</head> 
<body>
<div id="testdiv" contenteditable="true" class="editbox" onkeydown="enterkey()" >可以在任意文字后面插入圖片或者文字哦！<br /></div>
<div class="imgbox">
  <img src="faceimg/1.gif">
  <img src="faceimg/2.gif">
  <img src="faceimg/3.gif">
  <img src="faceimg/4.gif">
</div>
   
        
 
<script type="text/javascript">
//此處必須防止在最下端。
var edt = document.getElementById("testdiv");
if(edt.addEventListener){
edt.addEventListener("paste",pasteHandler,false);
}else{
edt.attachEvent("onpaste",pasteHandler);
}
</script>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>contenteditable</title>
<style>
*{
    margin:0;padding:0;
}
.im-message-area{
    width:98%;
    padding:2px;
    height:75px;
    border:#000 solid 1px;
    background:#fff;
    font:12px/20px arial,"\5b8b\4f53";
    word-wrap:break-word;
    overflow-y:auto;
    line-height:1;
}
.ul{display:none;}
.ul li{
    background-color:#CCC;
    width:50px;
}
</style>
<script language="javascript" type="text/javascript">
function inimage(text){
    var obj= $(".im-message-area")[0];
    var range, node;
    if(!obj.hasfocus) {
        obj.focus();
    }
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.collapse(false);
        node = range.createContextualFragment(text);
        var c = node.lastChild;
        range.insertNode(node);
        if(c){
            range.setEndAfter(c);
            range.setStartAfter(c)
        }
        var j = window.getSelection();
        j.removeAllRanges();
        j.addRange(range);
        
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(text);
    }
}
$(document).ready(function(){
    $('#button').click(function(){
        $('.ul').show();
    })
    $('.ul li').each(function(){
        $(this).click(function(){
            inimage($(this).text());
        })    
    })
});

</script>
</head>
<body>
    <div contenteditable="true" id="im_message_area" class="im-message-area"><br></div>
    <a href="javascript:void(0)" id="button">按鈕</a>
    <ul class="ul">
        <li>(笑)</li>
        <li>(哭)</li>
        <li>(樂)</li>
    </ul>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>

<body>
    <div id="editor"
        style="width:400px;margin:100px auto;height:300px;border:1px solid #DFDFDF;"
        contenteditable="true">
        這里插入一個圖片！將代碼中方法document.execCommand(‘InsertImage’, false, _img)更改參數，應該可以插入html代碼等其他元素。
    </div>
    <a href="javascript:void(0);" onclick="edit()">強力插入！</a>
    <script>
    var editor = document.getElementById("editor");
    var range, bookmark;
    var saveFocus = function(){//保存焦點狀態
        if (document.selection) { //只有坑爹的IE才執行下面的代碼
            range = document.selection.createRange();
            bookmark=range.getBookmark();
        }
    }
    editor.onclick = saveFocus;//在鼠標點擊編輯區時保存焦點
    editor.onkeydown = saveFocus;//在輸入內容時也保存焦點
    function edit() {
        insertImg("http://www.baidu.com/img/baidu_sylogo1.gif");
    }
    function insertImg(_img) {
        if (range) { //同樣，坑爹IE專用代碼
            range.moveToBookmark(bookmark);
            range.select();
        }
        document.execCommand('InsertImage', false, _img);
 
    }
    </script>
</body>
</html>

http://smallmo.com/demo/qa/mouse.html

<html><head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS設置及獲取Textarea的光標位置</title>
  <script>
    var isIE = !(!document.all);
    function posCursor(){
      var start=0,end=0; 
      var oTextarea = document.getElementById("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;
      }
      document.getElementById("start").value = start; 
      document.getElementById("end").value = end;
    }
    
    
    function moveCursor(){
      var oTextarea = document.getElementById("textarea");
      var start = parseInt(document.getElementById("start").value); 
      var end =  parseInt(document.getElementById("end").value);
      if(isNaN(start)||isNaN(end)){
        alert("位置輸入錯誤");
      }
      if(isIE){
        var oTextRange = oTextarea.createTextRange();
        var LStart = start;
        var LEnd = end;
        var start = 0;
        var end = 0;
        var value = oTextarea.value;
        for(var i=0; i<value.length && i<LStart; i++){
          var c = value.charAt(i);
          if(c!='\n'){
            start++;
          }
        }
        for(var i=value.length-1; i>=LEnd && i>=0; i--){
          var c = value.charAt(i);
          if(c!='\n'){
            end++;
          }
        }
        oTextRange.moveStart('character', start);
        oTextRange.moveEnd('character', -end);
        //oTextRange.collapse(true);
        oTextRange.select();
        oTextarea.focus();
      }else{
        oTextarea.select();
        oTextarea.selectionStart=start;
        oTextarea.selectionEnd=end;
      }
    } 
  </script>
  <body>
    <table border="1" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td>start: <input type="text" id="start" size="3" value="0"/></td> 
        <td>end:   <input type="text" id="end"   size="3" value="0"/></td> 
      </tr> 
      <tr> 
      <td colspan="2"> 
        <textarea id="textarea"
          onKeydown="posCursor()" 
          onKeyup="posCursor()" 
          onmousedown="posCursor()" 
          onmouseup="posCursor()" 
          onfocus="posCursor()" 
          rows="14"
          cols="50">虞美人
春花秋月何時了，往事知多少。
小樓昨夜又東風，故國不堪回首月明中！
雕l欄玉砌應猶在，只是朱顏改。
問君能有幾多愁？恰似一江春水向東流。</textarea> 
        </td> 
      </tr> 
      <tr> 
        <td></td> 
        <td><input type="button" onClick="moveCursor()" value="設置光標位置"/></td> 
      </tr> 
    </table> 
  </body>
</html>

http://smallmo.com/demo/upload/upload/position.html

<!DOCTYPE html>
<html>
<head>
<title>js獲取div編輯框，textarea，input text的光標位置，兼容FF和IE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
function getPosition(element) {
    var OsObject = "";
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        OsObject = "MSIE";
    }
    if (navigator.userAgent.indexOf("Firefox") > 0) {
        OsObject = "Firefox";
    }
    if (navigator.userAgent.indexOf("Safari") > 0) {
        OsObject = "Safari";
    }
    if (navigator.userAgent.indexOf("Camino") > 0) {
        OsObject = "Camino";
    }
    if (navigator.userAgent.indexOf("Gecko") > 0) {
        OsObject = "Gecko";
    }
    if (navigator.userAgent.indexOf("Chrome") > 0) {
        OsObject = "Chrome";
    }

    var result = 0;
    if (!document.selection) { //非IE瀏覽器
        var thisTagName = null;
        if ((element.tagNam!= "TEXTAREA") && (element.tagNam != "INPUT")){
            if (element.tagName == "DIV" && element.getAttribute("contenteditable") == "true") {
                thisTagName = window.getSelection().anchorNode.parentElement.tagName;
            } else {
                thisTagName == null;
            }
        } else {
            if (element.tagNam == "INPUT" && element.getAttribute("type") == "text") {
                thisTagName = window.getSelection().anchorNode.tagName;
            } else {
                console.log(window.getSelection());
                thisTagName = window.getSelection().anchorNode.tagName;
            }
        }
        if (thisTagName == "TEXTAREA" || thisTagName == "INPUT" || (thisTagName == "BODY" && OsObject == "Chrome")) {
            result = element.selectionStart
        } else if (thisTagName != null) {
            if (thisTagName == element.tagName) {
                if (window.getSelection().anchorNode.textContent == element.innerHTML) {
                    result = window.getSelection().anchorOffset;
                } else {
                    var currentIndex = window.getSelection().anchorOffset;
                    var txt = "";
                    var txtoo = window.getSelection().anchorNode.previousSibling;
                    while (txtoo != null) {
                        txt += txtoo.textContent;
                        txtoo = txtoo.previousSibling;
                    }
                    result = txt.length + currentIndex;
                }
            } else {
                var currentIndex = window.getSelection().anchorOffset;
                var txt = "";
                var txtoo = window.getSelection().anchorNode.parentElement.previousSibling;
                while (txtoo != null) {
                    txt += txtoo.textContent;
                    txtoo = txtoo.previousSibling;
                }
                result = txt.length + currentIndex;
            }
        } else {
            return 0;
        }
    } else { //IE
        var rng;
        if (element.tagNam == "TEXTAREA" || (element.tagNam == "INPUT" && element.getAttribute("type") == "text") || (element.tagName == "DIV" && element.getAttribute("contenteditable") == "true")) {
            element.focus();
            rng = document.selection.createRange();
            rng.moveStart('character', -element.innerText.length);
            var text = rng.text;
            for (var i = 0; i < element.innerText.length; i++) {
                if (element.innerText.substring(0, i + 1) == text.substring(text.length - i - 1, text.length)) {
                    result = i + 1;
                }
            }
        } else {
            return 0;
        }
    }
    return result;
}

function getValue(element) {
    var pos = getPosition(element);
    document.getElementById("pnum").value = pos;
}
</script>
<style type="text/css">
#Div1, #Div2{
    width: 500px;
    height: 100px;
    border: solid 1px black;
}
</style>
</head>
<body>
    <input id="pnum" type="text" value="Hello,wellcome to test! 你好,歡迎測試!" onmouseup="getValue(this)" style="display: block" />
    <textarea cols="60" rows="10" onkeyup="getValue(this)" onmouseup="getValue(this)">
        Hello,wellcome to test! 你好,歡迎測試!      注意源代碼開閉合標記之間不能換行，否則統計錯誤！
    </textarea>
    <div id="Div1" onclick="getValue(this);" onkeyup="getValue(this);" contenteditable="true">
        一二三
        <span>四五</span>
        六七八
        <span>九零</span> 
        注意源代碼開閉合標記之間不能換行，否則統計錯誤！注意div編輯框源碼里面是嵌套有其他標簽的，可以正常返回正確位置！
    </div>
    <br />
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js實現在光標的位置添加內容 js實現在光標的位置添加內容 vue在光標的位置插入內容 textarea 根據光標位置添加內容 js控制鼠標光標的位置 vue 添加內容到光標指定位置 js 獲取輸入框中光標的索引位置 js獲取文本域中光標的位置 js獲取光標位置並插入內容 js之向div contenteditable光標位置添加字符

js實現在光標的位置 添加內容

免責聲明！

js實現在光標的位置添加內容