如何用JS在多行文本框中光标入插入文字？要求FIREFOX也能正常用

teatool 2005-05-14 05:29:25

RT

...全文

135 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2005-05-17

打赏
举报

回复

<script type="text/javascript">
function setCaret (textObj) {
if (textObj.createTextRange) {
textObj.caretPos = document.selection.createRange().duplicate();
}
}
function insertAtCaret (textObj, textFeildValue) {
if(document.all){
if (textObj.createTextRange && textObj.caretPos) {
var caretPos = textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?textFeildValue + ' ' : textFeildValue;
}else{
textObj.value = textFeildValue;
}
}else{
if(textObj.setSelectionRange){
var rangeStart = textObj.selectionStart;
var rangeEnd = textObj.selectionEnd;
var tempStr1 = textObj.value.substring(0,rangeStart);
var tempStr2 = textObj.value.substring(rangeEnd);
textObj.value = tempStr1 + textFeildValue + tempStr2;
}else{
alert("This version of Mozilla based browser does not support setSelectionRange");
}
}
}

</script>

<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;"
onselect="setCaret(this);"
onclick="setCaret(this);"
onkeyup="setCaret(this);" >例子例子例子例子例子</textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入"
onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>

teatool 2005-05-17

打赏
举报

回复

楼上的老大，这段代码在IE里是正常的，但在FIREFOX中就不是插入了，而是把多行文本框的内容全部替换成要插入的文字了

hchxxzx 2005-05-15

打赏
举报

回复

<HTML>
<HEAD>
<SCRIPT>
function storeCaret(textEl)
{
if(textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret(textEl,text){
if(textEl.createTextRange && textEl.caretPos){
var caretPos = textEl.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == '' ? text + '' : text;
}
else
textEl.value = text;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);">测试测试测试测试测试测试</TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="要插入的文字">
<BR>
<INPUT TYPE="button" VALUE="在光标处插入" ONCLICK="insertAtCaret(this.form.aTextArea,this.form.aText.value);">
</FORM>
</BODY>
</HTML>

课程前部分介绍网页组成元素，浏览器内核，网页骨架，基本标签，标签属性中间部分学习网站中常用的标签，如链接，图片，表格，标题，内联等，并学习这些相关属性，如何用guiplan一键插入标签，一键选择属性，一键...

很久没有写关于JS的博客了，说实话，对于JS小弟仅限于会简单使用的程度。...扯得稍微远了一些，回归正题，今天跟大家分享一个很实用的小实例——在光标处插入文本。 function insertAtCursor(myField, myValue...

因项目需要，需要在多行文本框中的光标位置插入字符，利于js的 document.selection属性很快就实现，但发现在firefox中无法兼容selection属性，网上找了很久也没有找到合适的方法，经过研究，改出了兼容ie和FF的完美...

因项目需要，需要在多行文本框中的光标位置插入字符，利于js的document.selection属性很快就实现，但发现在firefox中无法兼容selection属性，网上找了很久也没有找到合适的方法，经过研究，改出了兼容ie和FF的完美...

87,902

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章