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>  
    

      

  • 相关阅读:
    有注释的LED驱动
    给想成为程序员的大学生的建议
    三星s3c6410用户手册初步阅读
    linux下重新安装grub
    对寄存器的操作
    linux 头文件
    VC的环境设置
    VC++工程文件说明
    C/C++文件操作转载自http://www.cnblogs.com/kzloser/archive/2012/07/16/2593133.html#b1_2
    GetWindowDC-BeginPaint-GetDC 区别详解
  • 原文地址:https://www.cnblogs.com/GumpYan/p/7880371.html
Copyright © 2011-2022 走看看