网上有很多富文本编辑器，但最终都是离不开对光标的控制的，本文会从TextArea元素来做一个基本的示例尝试，有兴趣的同学可以尝试做一个更复杂的富文本编辑器练手。
网上找的示例：
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>光标位置</title>
<style>
INPUT{border: 1 solid #000000}
BODY,TABLE{font-size: 10pt}
</style>
</head><body><table border="0" width="700" cellspacing="0" cellpadding="0">
<tr>
<td width="479" rowspan="7">
点击 TextArea 实现光标定位
<p>
<textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>
<script>
function movePoint()
{
var pn = parseInt(pnum.value);
if(isNaN(pn))
return;
var rng = box.createTextRange();
rng.moveStart("character",pn);
rng.collapse(true);
rng.select();
returnCase(rng)
}
function tellPoint()
{
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveStart("character",-event.srcElement.value.length);
pnum.value = rng.text.length;
alert(rng.text);
returnCase(rng);
}
function returnCase(rng)
{
bh.innerText = rng.boundingHeight;
bl.innerText = rng.boundingLeft;
bt.innerText = rng.boundingTop;
bw.innerText = rng.boundingWidth;
ot.innerText = rng.offsetTop;
ol.innerText = rng.offsetLeft;
t.innerText = rng.text;
}
function selectText(sp,ep)
{
sp = parseInt(sp)
ep = parseInt(ep)
if(isNaN(sp)||isNaN(ep))
return;
var rng = box.createTextRange();
rng.moveEnd("character",-box.value.length)
rng.moveStart("character",-box.value.length)
rng.collapse(true);
rng.moveEnd("character",ep)
rng.moveStart("character",sp)
rng.select();
returnCase(rng);
} var rg = box.createTextRange();
function findText(tw)
{
if(tw=="")
return;
var sw = 0;
if(document.selection)
{
sw = document.selection.createRange().text.length;
}
rg.moveEnd("character",box.value.length);
rg.moveStart("character",sw);
if(rg.findText(tw))
{
rg.select(); returnCase(rg);
}
if(rg.text!=tw)
{
alert("已经搜索完了")
rg = box.createTextRange()
}
}
</script>
</p>
<p></p>
光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onClick="movePoint()" value="移动光标到指定位置">
<p></p>
选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onClick="selectText(sbox.value,ebox.value)" value="选择">
<p></p>
选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onClick="findText(cbox.value)" value="查找下一个并选择">
</td>
<td width="217">boundingHeight: <span id="bh"></span></td>
</tr>
<tr>
<td width="217">boundingWidth: <span id="bw"></span></td>
</tr>
<tr>
<td width="217">boundingTop: <span id="bt"></span></td>
</tr>
<tr>
<td width="217">boundingLeft: <span id="bl"></span></td>
</tr>
<tr>
<td width="217">offsetLeft: <span id="ol"></span> </td>
</tr>
<tr>
<td width="217">offsetTop: <span id="ot"></span> </td>
</tr>
<tr>
<td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td>
</tr>
</table>
</body>
</html>
个人示例尝试：
<html>
<head>
<title>测试一下获取textarea的光标位置以及插入文本</title>
<script language="JavaScript" type="text/javascript">
function test(){
var myString = ""
var temp = event.srcElement.createTextRange();
temp.moveToPoint(event.x,event.y);
//把结束点移到最后
temp.moveEnd("character",event.srcElement.value.length);
alert(temp.text);
//把开始点移到最前面
temp.moveStart("character",-event.srcElement.value.length);
myString = temp.text;
var mytt = document.getElementById('mytext').value;
myString = myString + mytt;
alert(myString);
//myString = myString + document.getElementById('tt').value.substring(temp.text.length);
//alert(myString);
/*
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveStart("character",-event.srcElement.value.length);
//pnum.value = rng.text.length;
alert(rng.text);
*/
}
function testend(){
var myString = "";
var temp = event.srcElement.createTextRange();
temp.moveToPoint("character",event.srcElement.value.length);
temp.moveStart(event.x,event.y);
alert(temp.text);
}
function test2(){
var textRange = tt.createTextRange();
textRange.moveToPoint(indexX,indexY);
textRange.moveStart("character",-tt.value.length);
alert(textRange.text);
}
var indexX,indexY;
function textIndex(){
indexX = event.x;
indexY = event.y;
alert(indexX+"x");
alert(indexY+"y");
}
</script>
</head>
<body>
<textarea id="tt" cols="60" rows="30" onClick="textIndex();">
我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
为了你我愿意
动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
</textarea>
<input id="mytext" type="text" value="我是陈海宇"/>
<input type="button" onClick="test2();"/>
</body>
</html>
相关推荐
textarea光标定位在最后，就是往textarea中赋值时候，光标自动移到最后。
### 在Textarea光标处插入文本 #### 知识点概览 本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境，包括Internet Explorer（IE）和其他基于Mozilla的浏览器（如Fire...
标题“Textarea在光标停留处插入文字”涉及到的是如何在`Textarea`中实现文字的动态插入，使得新添加的文字能精确地出现在用户当前光标所在的位置。这通常涉及到JavaScript的DOM操作和事件监听。 在HTML中，`...
有一个textArea,就是我们发微薄的那个框，别人的微薄都有一个转发的按钮，当我们点击这个转发按钮的时候，他的微薄就会进入到textArea中，看起来很简单的文本框赋值，其实难点就在于，这时候的光标是定位在最前面的...
jQuery扩展函数，用于获取设置textarea中光标位置
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
在IT领域，特别是前端开发中，使用JavaScript在`textarea`元素的光标位置插入内容是一项常见且实用的技术。本文将详细解析如何实现这一功能，并深入理解其背后的逻辑与原理。 ### 核心知识点：在`textarea`光标处...
在网页开发中，有时我们需要实现一个功能，让用户能够快速地将光标定位到`textarea`元素的特定行。这个功能可以提升用户体验，特别是在处理大量文本输入时。在给定的标题和描述中，我们看到一个JavaScript函数`goL...
在网页设计和开发中，有时候我们需要实现这样的功能：当页面加载完成后，自动将光标定位到特定的文本框，并选中文本框内的全部文字。这个功能常见于表单填写、搜索框或者任何需要用户快速输入的场景，可以提高用户...
在JavaScript中，操作文本输入域，如`<textarea>`，涉及到光标位置的处理时，通常需要使用到浏览器提供的API。对于不同的浏览器，这些API可能会有所差异。在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的...
本文主要介绍如何使用jQuery在textarea元素中光标所在位置插入文本的技术，涉及到的操作和概念包括jQuery库的使用、文本框（textarea）的光标定位与操作、JavaScript中的字符串操作等。文章首先定义了jQuery的扩展...
标题“JS在textarea光标处插入文本的小例子”和描述“本实例使用Javascript实现在textarea光标处插入文本,支持多种浏览器”揭示了该文档是关于如何使用JavaScript在网页文本区域（textarea）组件光标所在位置插入...
### 光标定位方法 在网页开发中，光标定位是一项重要的功能，它涉及到文本编辑器、表单输入等交互式应用。本文将详细介绍不同浏览器环境下实现光标定位的方法。 #### 一、获取光标位置 获取光标位置通常有两种...
3. 错误提示：当检测到错误时，将光标定位到错误位置，引导用户修改。 总之，通过JavaScript，我们可以方便地获取和设置`<input>`和`<textarea>`中的光标位置，为用户提供更加流畅的交互体验。在实际开发中，确保...
jQuery textArea文本光标全功能插件，可以获取光标位置，向光标文字插入文本，高亮显示指定的文本块
textarea-as-ace-editor 赶紧把一个textarea元素变成一个实例。 用法 你需要jQuery。 推荐版本 1.11.2 或 2+。 < script src =" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js " > <...
目的通过点击页面上的按钮button 在textarea中的光标停留处插上文字