javascript实现在textarea光标位置插入文字并移动光标到文字末尾

1.背景:实现在textarea光标位置插入文字并移动光标到文字末尾

如果每次通过val("ss")赋值的形式插入文字到textarea中,会将上一次赋的值覆盖掉。

2.思路:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>Sliding Menu Effect</title>  
<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>  
<script type="text/javascript">     
    function insertText(obj,str) { 
        if (document.selection) { 
            var sel = document.selection.createRange(); 
            sel.text = str; 
        } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') { 
            var startPos = obj.selectionStart, 
            endPos = obj.selectionEnd, 
            cursorPos = startPos, 
            tmpStr = obj.value; 
            obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length); 
            cursorPos += str.length; 
            obj.selectionStart = obj.selectionEnd = cursorPos; 
        } else { 
            obj.value += str; 
            } 
        } 
        function moveEnd(obj){ 
            obj.focus(); 
            var len = obj.value.length; 
        if (document.selection) { 
            var sel = obj.createTextRange(); 
            sel.moveStart('character',len); 
            sel.collapse(); 
            sel.select(); 
        } else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') { 
            obj.selectionStart = obj.selectionEnd = len; 
        } 
    }  
</script>  
</head>  
<body>
    <input type="button" onclick="insertText(document.getElementById('text'),' 插入字符啊啊啊啊')" value="插入文字"></input> 
    <input type="button" onclick="moveEnd(document.getElementById('text'))" value="光标移到末尾"></input> 
    <textarea name="" id="text" cols="30" rows="10"></textarea>
</body>  
</html>  

  

原文地址:https://www.cnblogs.com/GumpYan/p/7880371.html