textarea从光标位置插入字符

最新推荐文章于 2024-04-18 11:15:48 发布

原创最新推荐文章于 2024-04-18 11:15:48 发布 · 380 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种在HTML的Textarea中实现从光标位置插入字符串的方法，通过JavaScript操作实现定位光标并插入指定文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

textarea从光标处插入字符串方法：

<html>       
  <head>       
    <title>TextArea光标定位</title>       
  </head>       
 <body>       
    <script language=Javascript>       
    function AddOnPos(obj,charvalue){       
       //obj代表要插入字符的输入框       
       //value代表要插入的字符       
       //obj.document.designMode = "On";
       obj.focus();       
       var r = document.selection.createRange();       
       var ctr = obj.createTextRange();       
       var i;       
       var s = obj.value;       
       //注释掉的这种方法只能用在单行的输入框input内，对多行输入框textarea无效       
       //r.setEndPoint( "StartToStart",ctr);       
       //i = r.text.length;       
       //取到光标位置----Start----       
       var ivalue = "&^asdjfls2FFFF325%$^&";           
       r.text = ivalue;       
       i =  obj.value.indexOf(ivalue);       
       r.moveStart("character",-ivalue.length);       
       r.text = " ";       
       //取到光标位置----End----       
       //插入字符       
       obj.value = s.substr(0,i) + charvalue + s.substr(i,s.length);       
       ctr.collapse(true);       
       ctr.moveStart( "character",i + charvalue.length);       
       ctr.select();       
    }       
    function toAdd(){       
        var obj=document.all("oTxt");       
        var str=document.all("oTxt1").value;       
        AddOnPos(obj,str)       
    }       
    </script>       
    <!--<input type="text" name="oTxt" id="oTxt" value="shism">-->       
	<textarea name="oTxt" id="oTxt" cols="60" rows="20"></textarea>
    <hr>             
    <input type="text" name="oTxt1" id="oTxt1">       
    <input type="button" value="test" onclick="toAdd()">       
 </body>       
 </html>