在文本框(textarea)光标处插入文本的js代码

发布时间:2019-10-10编辑:脚本学堂
在textarea文本框光标处插入文本,点击按钮自动加入设置好的文字,实用性不强,主要用于学习。

实际测试可以支持多浏览器,大家放心使用,绿色纯天然,哈哈。

完整代码如下:
 

复制代码 代码示例:
<!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=gb2312" />
<title>在文本框鼠标指定位置插入文本</title>
<script type="text/javascript">
function insertAtCursor(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert www.jb200.com
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
if (restoreTop > 0) {
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}
</script>
</head>
<body>
<div style="width:500px;margin-left:auto;margin-right:auto;margin-top:10px;">
<textarea id="jbxue_com" style="width:340px; height:180px">
在textarea光标处插入文本
</textarea>
<input type="button" onclick="insertAtCursor(document.getElementById('jbxue_com'),'www.jb200.com')" value="插入文本" />
</div></body>
</html>
 


演示截图如下:
文本框光标处插入文本
您可能感兴趣的文章:
js光标定位的实例代码
js实现跟随光标的提示框的代码
js中光标定位的方法
js实现textarea光标定位的方法(兼容IE和FF)