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 相关文章推荐
event.srcElement+表格应用
Aug 29 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
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自动生成月历代码
2006/10/09 PHP
php array的学习笔记
2012/05/10 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
详解PHP PDO简单教程
2019/05/28 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
javascript使用call调用微信API
2014/12/15 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
vue 页面回退mounted函数不执行的解决方案
2020/07/26 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
pandas对指定列进行填充的方法
2018/04/11 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python jieba库用法及实例解析
2019/11/04 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
保研推荐信格式
2015/03/25 职场文书
会议室使用管理制度
2015/08/06 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书