zoukankan      html  css  js  c++  java
  • 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>  
    

      

  • 相关阅读:
    SIGAI深度学习第三集 人工神经网络2
    SIGAI深度学习第二集 人工神经网络1
    SIGAI深度学习第一集 机器学习与数学基础知识
    python第三方库的更新和安装指定版本
    AttributeError: 'int' object has no attribute 'upper'
    洛谷 3916 图的遍历
    【模板】分块
    洛谷 1003 NOIP2011 D1T1 铺地毯
    洛谷 省选营题目 过年
    洛谷 1396 营救 (最短路)
  • 原文地址:https://www.cnblogs.com/GumpYan/p/7880371.html
Copyright © 2011-2022 走看看