编程 Javascript

JS在textarea光标处插入文本的小例子

Posted in Javascript onMarch 22, 2013

下面是代码:

--------------------------------------------------------------------------------
<!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>JS在文本域鼠标指定位置插入文本-柯乐义</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.keleyi.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:100px;">
<textarea id="keleyi_com" style="width:340px; height:180px">
柯乐义 Javascript 在textarea光标处插入文本
</textarea>
<input type="button" onclick="insertAtCursor(document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" />
</div></body>
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

IE和Firefox的Javascript兼容性总结[推荐收藏]

Oct 19 Javascript

JS 实现导航栏悬停效果(续2)

Sep 24 Javascript

js操作label给label赋值及取label的值示例

Nov 07 Javascript

Jquery时间轴特效(三种不同类型)

Nov 02 Javascript

js事件处理程序跨浏览器解决方案

Mar 27 Javascript

学习Angularjs分页指令

Jul 01 Javascript

bootstrap-datetimepicker实现只显示到日期的方法

Nov 25 Javascript

vue-router路由参数刷新消失的问题解决方法

Jun 17 Javascript

js分页之前端代码实现和请求处理

Aug 04 Javascript

详解Chart.js轻量级图表库的使用经验

May 22 Javascript

详解wepy开发小程序踩过的坑(小结)

May 22 Javascript

浅谈JS的二进制家族

May 09 Javascript

JavaScript 验证码的实例代码(附效果图)

Mar 22 #Javascript

jquery实现图片等比例缩放以及max-width在ie中不兼容解决

Mar 21 #Javascript

jQuery+css+html实现页面遮罩弹出框

Mar 21 #Javascript

jquery实现固定顶部导航效果(仿蘑菇街)

Mar 21 #Javascript

jquery实现网站超链接和图片提示效果

Mar 21 #Javascript

jquery 表格的增行删行实现思路

Mar 21 #Javascript

杨氏矩阵查找的JS代码

Mar 21 #Javascript