获取TextArea中已选中文本在整个文本串中的索引
2008-09-16 16:27
344 查看
在坛子里看到有人提出如何获取TextArea中选中的文本在整个文本串中的索引或者如何获取未选中文本的问题。我们知道通过document.selection.createRange().text方式能够获取当前选中的文本，但获取选中的这个文本在整个文本串中的起始位置却是有一点难度。已开始想到用indexOf()方法来解决问题，但立即被否决了，因为这种方式没有考虑到TextArea中有重复文本串的问题，所以indexOf()的结果不是绝对准确的。
其间有个另外的问题，即想在选中后马上响应一个事件。开始准备用TextArea的onselect事件来响应处理，虽然网上查得资料说onselect是在mouseUp后才fire的，但在我的试验中它在MouseUp之前就fire了，所以通常只选择了第一个字符就触发了这个事件（没有深入证实这个问题）。而onselectstart更是在MouseDown后马上就fire了。所以要解决这个问题还是得自己在MouseDown,MouseUp及MouseMove事件中见来协调判断了。
通过网上找到另外一位高人写的帖子，我抄袭一下解决了题中所述问题，附代码如下：
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function savePos(textBox)
{
var start = 0
var end = 0
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id)
{
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
for (var i = 0; i <= start; i ++)
{
if (textBox.value.charAt(i) == '/n')
start++;
}
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
for (var i = 0; i <= end; i ++)
{
if (textBox.value.charAt(i) == '/n')
end ++;
}
}
document.getElementById("start").innerText = start;
document.getElementById("end").innerText = end;
//Unselected Text
var preText = textBox.value.substr(0,start)
var endText = textBox.value.substr(end)
document.getElementById("unSelectedText").innerHTML = preText + (end>start? "<font color=red><b>{SELECTED TEXT}</b></font>" : "") + endText
}
</script>
</head>
<body>
<textarea id="ta" onmousedown="savePos(this)" onmouseup="savePos(this)" rows="14" cols="50">textarea中有一段文本串，onselect的时候，如何取得选中文本在整个文本串中的索引（选中串的起始位置索引）？谢谢！</textarea>
<p>
Start Index : <span id="start"></span>
</p>
<p>
End Index : <span id="end"></span>
</p>
<p>
UnSelected Text : <span id="unSelectedText"></span>
</p>
</body>
</html>
同时附上那位高人的原代码，并表示敬意：
<html>
<head>
<title>TEST</title>
<style>
body,td{ font-family: verdana, arial, helvetica, sans-serif;font-size: 12px; }
</style>
<script type="text/javascript">
var start=0;
var end=0;
function add()
{
var textBox = document.getElementById("ta");
var pre = textBox.value.substr(0, start);
var post = textBox.value.substr(end);
textBox.value = pre + document.getElementById("inputtext").value + post;
}
function savePos(textBox)
{
//如果是Firefox(1.5)的话，方法很简单
if(typeof(textBox.selectionStart) == "number")
{
start = textBox.selectionStart;
end = textBox.selectionEnd;
}
//下面是IE(6.0)的方法，麻烦得很，还要计算上'/n'
else if(document.selection)
{
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id)
{
// create a selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
//两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
//range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则
//返回小于0的值，则range_all往右移一点，直到两个range的start相同。
// calculate selection start point by moving beginning of range_all to beginning of range
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
// get number of line breaks from textarea start to selection start and add them to start
// 计算一下/n
for (var i = 0; i <= start; i ++)
{
if (textBox.value.charAt(i) == '/n')
start++;
}
// create a selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
// calculate selection end point by moving beginning of range_all to end of range
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
// get number of line breaks from textarea start to selection end and add them to end
for (var i = 0; i <= end; i ++)
{
if (textBox.value.charAt(i) == '/n')
end ++;
}
}
}
document.getElementById("start").value = start;
document.getElementById("end").value = end;
}
</script>
</head>
<body>
<form action="a.cgi">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>start: <input type="text" id="start" size="3"/></td>
<td>end: <input type="text" id="end" size="3"/></td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" onKeydown="savePos(this)"
onKeyup="savePos(this)"
onmousedown="savePos(this)"
onmouseup="savePos(this)"
onfocus="savePos(this)"
rows="14" cols="50"></textarea>
</td>
</tr>
<tr>
<td><input type="text" id="inputtext" /></td>
<td><input type="button" onClick="add()" value="Add Text"/></td>
</tr>
</table>
</form>
</body>
</html>
其间有个另外的问题，即想在选中后马上响应一个事件。开始准备用TextArea的onselect事件来响应处理，虽然网上查得资料说onselect是在mouseUp后才fire的，但在我的试验中它在MouseUp之前就fire了，所以通常只选择了第一个字符就触发了这个事件（没有深入证实这个问题）。而onselectstart更是在MouseDown后马上就fire了。所以要解决这个问题还是得自己在MouseDown,MouseUp及MouseMove事件中见来协调判断了。
通过网上找到另外一位高人写的帖子，我抄袭一下解决了题中所述问题，附代码如下：
<html>
<head>
<title>TEST</title>
<script type="text/javascript">
function savePos(textBox)
{
var start = 0
var end = 0
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id)
{
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
for (var i = 0; i <= start; i ++)
{
if (textBox.value.charAt(i) == '/n')
start++;
}
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
for (var i = 0; i <= end; i ++)
{
if (textBox.value.charAt(i) == '/n')
end ++;
}
}
document.getElementById("start").innerText = start;
document.getElementById("end").innerText = end;
//Unselected Text
var preText = textBox.value.substr(0,start)
var endText = textBox.value.substr(end)
document.getElementById("unSelectedText").innerHTML = preText + (end>start? "<font color=red><b>{SELECTED TEXT}</b></font>" : "") + endText
}
</script>
</head>
<body>
<textarea id="ta" onmousedown="savePos(this)" onmouseup="savePos(this)" rows="14" cols="50">textarea中有一段文本串，onselect的时候，如何取得选中文本在整个文本串中的索引（选中串的起始位置索引）？谢谢！</textarea>
<p>
Start Index : <span id="start"></span>
</p>
<p>
End Index : <span id="end"></span>
</p>
<p>
UnSelected Text : <span id="unSelectedText"></span>
</p>
</body>
</html>
同时附上那位高人的原代码，并表示敬意：
<html>
<head>
<title>TEST</title>
<style>
body,td{ font-family: verdana, arial, helvetica, sans-serif;font-size: 12px; }
</style>
<script type="text/javascript">
var start=0;
var end=0;
function add()
{
var textBox = document.getElementById("ta");
var pre = textBox.value.substr(0, start);
var post = textBox.value.substr(end);
textBox.value = pre + document.getElementById("inputtext").value + post;
}
function savePos(textBox)
{
//如果是Firefox(1.5)的话，方法很简单
if(typeof(textBox.selectionStart) == "number")
{
start = textBox.selectionStart;
end = textBox.selectionEnd;
}
//下面是IE(6.0)的方法，麻烦得很，还要计算上'/n'
else if(document.selection)
{
var range = document.selection.createRange();
if(range.parentElement().id == textBox.id)
{
// create a selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
//两个range，一个是已经选择的text(range)，一个是整个textarea(range_all)
//range_all.compareEndPoints()比较两个端点，如果range_all比range更往左(further to the left)，则
//返回小于0的值，则range_all往右移一点，直到两个range的start相同。
// calculate selection start point by moving beginning of range_all to beginning of range
for (start=0; range_all.compareEndPoints("StartToStart", range) < 0; start++)
range_all.moveStart('character', 1);
// get number of line breaks from textarea start to selection start and add them to start
// 计算一下/n
for (var i = 0; i <= start; i ++)
{
if (textBox.value.charAt(i) == '/n')
start++;
}
// create a selection of the whole textarea
var range_all = document.body.createTextRange();
range_all.moveToElementText(textBox);
// calculate selection end point by moving beginning of range_all to end of range
for (end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; end ++)
range_all.moveStart('character', 1);
// get number of line breaks from textarea start to selection end and add them to end
for (var i = 0; i <= end; i ++)
{
if (textBox.value.charAt(i) == '/n')
end ++;
}
}
}
document.getElementById("start").value = start;
document.getElementById("end").value = end;
}
</script>
</head>
<body>
<form action="a.cgi">
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>start: <input type="text" id="start" size="3"/></td>
<td>end: <input type="text" id="end" size="3"/></td>
</tr>
<tr>
<td colspan="2">
<textarea id="ta" onKeydown="savePos(this)"
onKeyup="savePos(this)"
onmousedown="savePos(this)"
onmouseup="savePos(this)"
onfocus="savePos(this)"
rows="14" cols="50"></textarea>
</td>
</tr>
<tr>
<td><input type="text" id="inputtext" /></td>
<td><input type="button" onClick="add()" value="Add Text"/></td>
</tr>
</table>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery获取和设置select选中的值/文本/索引及选中事件
- input和textarea设置文本选中和获取选中文本
- jQuery实现select下拉框获取当前选中文本、值、索引
- jquery获取select选中值的文本，并赋值给另一个输入框
- jquery实现ul列表中点击radio后面的文本选中radio,点击整个li选中radio
- EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- 获取GridView中RowCommand的当前选中行的索引或主键Id
- js获取checkbox中所有选中值及input后面所跟的文本
- Jquery操作select,radio,checkBox,获取选中项的值和文本，根据值和文本设置选中项
- [Android教程]EditText设置/隐藏光标位置、选中文本和获取/清除焦点
- 获取整个实例下缺失的索引信息
- jquery获取选中select的文本,值等
- VC++的MFC中 获取选中静态文本的内容
- 获取 <Select>标签选中的文本
- 获取GridView中RowCommand的当前选中行的索引或主键Id
- [图解]在输入框和文本框中获取和设置光标位置，以及选中文本和获取选中文本值的方法 --- 详解，兼容所有浏览器。
- javascript获取textarea中所选文本的开始位置、结束位置和选择的文本
- text/textarea获取文本最后位置焦点
- Js 获取select中选中option的文本值
- js获取下拉列表(select)选中项的值和文本