通过javascript在光标处插入文本

王朝html/css/js·作者佚名  2008-08-06
窄屏简体版  字體: |||超大  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--http://community.csdn.net/Expert/TopicView3.asp?id=5649731-->

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>Insert Text into TextBox at Cursor Position by Javascript</title>

<script type="text/javascript">

var cursPos; // 窗口全局变量,保存目标 TextBox 的最后一次活动光标位置

function insertText() {

var txt1 = document.getElementById("Text1");

var txt2 = document.getElementById("Text2");

//debugger;

if(!cursPos) TraceCursorPosition(txt2); // 获取光标位置

txt2.value = txt2.value.slice(0, cursPos.start) +

txt1.value + txt2.value.slice(cursPos.end)

}

// 跟踪光标位置

function TraceCursorPosition(obj)

{

//debugger;

cursPos = $CursorPosition(obj);

}

// 返回光标所在位置

/**//*

* source: http://blog.csdn.net/liujin4049/archive/2006/09/19/1244065.aspx

* source: http://www.devdao.com

* acknowledges for Marshall

* example:

* var myTextBox = document.getElementById("MyTextBoxID");

* var cursPos = $CursorPosition(myTextBox);

* alert(cursPos.item[0] + " " + cursPos.item[1]);

* // OR

* alert(cursPos.start + " " + cursPos.end);

*/

function $CursorPosition(textBox){

var start = 0, end = 0;

//如果是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 ++;

}

}

}

//return [start, end]; // 包括选中区域的起始位置

// modified to return as Object

return {"start": start, "end": end, "item": [start, end]};

}

</script>

</head>

<body>

input :<input id="Text1" type="text" /><input id="Button1" type="button" value="Insert" onclick="insertText()" /><br />

output:<textarea id="Text2" cols="40" rows="10" onkeydown="TraceCursorPosition(this)" onkeypress="TraceCursorPosition(this)" onfocus="TraceCursorPosition(this)" onselect="TraceCursorPosition(this)" onmouseover="TraceCursorPosition(this)" onmousedown="TraceCursorPosition(this)">hello world!</textarea><br />

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航