您的位置：首页 > Web前端 > JavaScript

Javascript在光标处插入文本

2010-03-26 15:06 441 查看

在文本框光标处插入文字，并不常用，但碰到了却也比较棘手，浏览器兼容的问题总让人头痛。

经查阅资料并经修改完善得到以下可用代码，运行一下看看效果更直观：

<!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=UTF-8">
<title>JAVASCRIPT在文本框的指定位置插入文本并定位光标</title>
<mce:script type="text/javascript"><!--

function InsertString(tbid, str){
var tb = document.getElementById(tbid);
tb.focus();
if (document.all){
var r = document.selection.createRange();
document.selection.empty();
r.text = str;
r.collapse();
r.select();
}
else{
var newstart = tb.selectionStart+str.length;
tb.value=tb.value.substr(0,tb.selectionStart)+str+tb.value.substring(tb.selectionEnd);
tb.selectionStart = newstart;
tb.selectionEnd = newstart;
}
}
function GetSelection(tbid){

var sel = '';
if (document.all){
var r = document.selection.createRange();
document.selection.empty();
sel = r.text;
}
else{
var tb = document.getElementById(tbid);
// tb.focus();
var start = tb.selectionStart;
var end = tb.selectionEnd;
sel = tb.value.substring(start, end);
}
return sel;
}
function ShowSelection(tbid){
var sel = GetSelection(tbid);
if (sel)
alert('选中的文本是：'+sel);
else
alert('未选择文本！');
}
// --></mce:script>
</head>
<body>
<form><textarea id="txtContent" cols="50" rows="5">先在本文框中点击鼠标或选择文本以确定光标位置和选取内容。
——晴枫 http://witmax.cn</textarea><br /><br />
<input type = "button" value = "插入字符串 {Good}" onclick="InsertString('txtContent', '{Good}');"/>
<input type = "button" value = "插入字符串 {Bad}" onclick="InsertString('txtContent', '{Bad}');"/>
<input type = "button" value = "获取选中的文本" onclick="ShowSelection('txtContent');"/><br />
<div id="tip"></div>
</form>

</body>
</html>

代码中，针对IE浏览器，运用document.selection.createRange()来解决；针对非IE浏览器，运用selectionStart和selectionEnd来操作。已能够获取文本框中选择的文本并控制文本框的光标，实际的应用那就随意发挥了。

以上代码已经过IE各版本、Firefox、Opera、Chrome、Safari测试。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航