js如何向文本框光标所在位置插入内容

发布时间:2019-08-21编辑:脚本学堂
本文介绍了js向文本框光标所在位置插入内容的方法,分享一例代码,有需要的朋友参考下。

例子,向文本框当前光标位置插入一段文本的js代码,支持ff和ie。

代码:
 

复制代码 代码示例:
<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>