textarea光标选中的文本_swing textarea可以选择-优快云博客

本文链接：https://blog.youkuaiyun.com/lanchangsheng/article/details/3838906

这篇博客介绍如何在HTML中获取textarea光标选中的文本，并提供了向前、向后移动光标以及显示选中内容的JavaScript实现。通过onkeyup、onmouseup事件监听和document.selection.createRange()方法获取选区范围，再用setpos和getpos函数处理光标位置和选中文本。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>textarea光标选中的文本</title>
</head>

<body>
<h2>textarea光标选中的文本</h2>
<p>
<textarea name="a" cols="60" rows="6" onkeyup="getpos(this)" onmouseup="getpos(this)" >012345678901234567890123456789
012345678901234567890123456789</textarea>
<input type=button value="向前" onclick="setpos(a,-1)">
<input type=button value="向后" onclick="setpos(a,1)">
<input type=button value="选择信息" onclick="getpos(a)">
<script type="text/javascript">

//声明两个变量开始和结束
var start;
var end;
function setpos(textBox,n)
{
//先让我们的textArea获得焦点
textBox.focus();
/*
获取当前选择的文本选择范围
如: 1)你选中一行文件. 他会出现蓝会背景. 那么这样一段文本可以就选择范围吧
2) 你把光标指向文本中. 那么选择范围可以看作是头和尾重叠了
*/
var range = document.selection.createRange();
//collapse(true) 光标放置起始位置,默认为range.collapse(false)不动
range.collapse(false)
//移动N个字符位置
range.move("character", n);
//可以看作显示光标如果没有这个方法.光标是不会出现在textarea标签上的
range.select();
};

function getpos(textBox)
{
textBox.focus();//先让我们的textArea获得焦点
/*
获取当前选择的文本选择范围
如: 1)你选中一行文件. 他会出现蓝会背景. 那么这样一段文本可以就选择范围吧
2) 你把光标指向文本中. 那么选择范围可以看作是头和尾重叠了
*/
var range = document.selection.createRange();
//他建一个新的选择范围
var range_all = document.body.createTextRange();

//将新的选择范围转移到textBox控件上
range_all.moveToElementText(textBox);
//将光标放置起始位置,默认为range.collapse(false)不动
range_all.collapse(true);
/*
把新的选择范围与选中范围设置同一个起始位置
参数(StartToStart)第一个Start是新范围第二个是选中范围的
我理解了将range_all 的Start 设置为 range 的范围 Start 位置
*/
range_all.setEndPoint("StartToStart", range);
//新光标移到了textBox控件上. 光标位置也设置了.那么他的文本值也就有了
start = range_all.text.length;
//显示我们的成果
//alert("总长度="+textBox.value.length+"/n选中前的内容="+range_all.text+"/n选中前的内容长度"+range_all.text.length);

//将光标放置起始位置,默认为range.collapse(false)不动
range_all.collapse(true);
/*
把新的选择范围与选中范围设置同一个起始位置
参数(StartToStart)第一个Start是新范围第二个是选中范围的
我理解了将range_all 的Start 设置为 range 的范围 End 位置
*/
range_all.setEndPoint("StartToEnd", range);
//alert("总长度="+textBox.value.length+"/n选中后的内容="+range_all.text+"/n选中后的内容长度"+range_all.text.length);
end = range_all.text.length;

alert("选中的文本是:"+textBox.value.substr(start,end-start));
};

</script>
</body>
</html>