<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>
分享到:
相关推荐
该方法适用于多种浏览器环境,包括Internet Explorer(IE)和其他基于Mozilla的浏览器(如Firefox)。我们将通过分析提供的代码示例来深入理解其实现原理。 #### 一、实现原理 ##### 1. 兼容性处理 由于不同的...
本文将介绍如何在IE、Firefox和Chrome中获取div编辑框、textarea和input text光标位置的方法,并提供相应的代码示例。 首先,了解不同浏览器对于光标位置获取的支持情况是必要的。例如,IE浏览器使用了document....
在非IE浏览器中,如Firefox、Chrome等,我们可以使用`selectionStart`属性来获取光标的位置。`selectionStart`返回的是光标在文本框中开始选择的字符索引,如果未进行任何选择,那么它就代表了光标所在的位置。 在...
在本文中,我们将探讨如何在 textarea 元素中实现光标定位,同时确保兼容 Internet Explorer(IE)和 Firefox(FF)这两种主要的浏览器。 在 textarea 中设置光标位置是一个常见的需求,特别是在用户交互场景中,如...
在JavaScript中,操作文本输入域,如`<textarea>`,涉及到光标位置的处理时,通常需要使用到浏览器提供的API。对于不同的浏览器,这些API可能会有所差异。在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的...
5. **兼容性**:良好的插件会确保其在各种浏览器(包括主流的Chrome、Firefox、Safari、Edge以及旧版本的IE)中都能正常工作。 6. **事件监听**:插件可能还提供监听光标位置变化的事件,帮助开发者在光标移动时...
如果不支持,那么将检查是否支持textDom.selectionStart,这是非IE浏览器(如Firefox)支持的方式来获取光标位置。 获取光标位置的函数核心在于检测当前浏览器支持哪种方式,并根据不同的浏览器实现不同的逻辑。在...
本文将深入探讨如何用JavaScript获取和设置Input和TextArea元素中的光标位置,并提供兼容性处理的方法。 在获取Input或TextArea元素光标位置时,我们需要区分对待IE浏览器和其他现代浏览器。IE浏览器通过document....
获取光标位置通常有两种方式:一种是针对IE浏览器的支持,另一种则是对Firefox和其他现代浏览器的支持。 ##### IE支持 对于Internet Explorer(IE)浏览器,可以通过`document.selection`对象来获取光标的位置: ...
在旧版IE浏览器中,我们需要使用document.selection来获取当前选区,而在其他浏览器中,可以直接通过textarea的selectionStart属性来获取光标位置。 2. 设置光标位置(setCursorPosition): 该方法用于将光标设置到...
2. Mozilla/Firefox和Netscape等非IE浏览器支持:这些浏览器支持通过selectionStart和selectionEnd属性来获取当前的光标位置。这两个属性分别代表当前选中文本区域的开始和结束位置的索引。代码首先保存当前光标位置...
如果元素是`input`或`textarea`,在Firefox中可以通过检查`selectionStart`属性来确定光标位置。这个属性表示选中文本的起始位置,如果当前没有选中文本,则表示光标位置。 接下来,我们来看看设置光标位置的函数`...
Firefox、Chrome等现代浏览器支持`selectionStart`和`selectionEnd`属性,可以直接获取光标位置。而IE浏览器则需要使用`document.selection`对象来获取光标位置。 在我们的示例代码中,我们使用了以下代码来获取...
本文将总结一些常用的JavaScript操作textarea的方法,这些方法可以在各种主流浏览器中使用,并通过实际测试验证了兼容性,包括IE6、IE8、Firefox、Chrome、Opera和Safari。 首先,需要了解textarea元素在DOM中的...
在不同的浏览器中,处理光标位置的方法有所不同,主要分为IE浏览器和其他非IE浏览器(如Chrome、Firefox)。 1. **获取光标位置** 对于非IE浏览器,如Chrome和Firefox,可以使用`selectionStart`属性来获取光标...
在JavaScript中,实现一个在文本框(`<textarea>`)中光标位置插入字符的功能,需要考虑到不同浏览器的兼容性问题。主要涉及到两种主要的浏览器:Internet Explorer (IE) 和非IE浏览器,如Firefox。IE浏览器使用的是...
javascript提供了一种方法,可以在用户选择的光标位置插入特定的文字内容,比如表情符号。 从给定文件中的代码片段可以看出,这个功能是通过一个HTML页面实现的,其中包含了JavaScript脚本。在描述中,提及了一个...