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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
用JS创建一个录屏功能
Nov 11 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
You might like
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Django卸载之后重新安装的方法
2017/03/15 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
领导检查欢迎词
2014/01/14 职场文书
汉语言文学职业规划
2014/02/14 职场文书
善意的谎言事例
2014/02/15 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
教师节老师寄语
2015/05/28 职场文书
圣诞晚会主持词
2015/07/01 职场文书
推广普通话的宣传语
2015/07/13 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers