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>  
    

      

  • 相关阅读:
    Divide and conquer:Matrix(POJ 3685)
    Divide and conquer:Median(POJ 3579)
    Divide and conquer:K Best(POJ 3111)
    Android studio——RelativeLayout(相对布局)
    javascript简单介绍
    假期学习2/3
    Android studio——LinearLayout(线性布局)
    假期学习2/2
    Javascript正则表达式
    假期学习2/1
  • 原文地址:https://www.cnblogs.com/GumpYan/p/7880371.html
Copyright © 2011-2022 走看看