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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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实现的MySQL数据浏览器
2007/03/11 PHP
php读取msn上的用户信息类
2008/12/05 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
php析构函数的简单使用说明
2015/08/24 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
Javascript与flash交互通信基础教程
2008/08/07 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
node.js中的Socket.IO使用实例
2014/11/04 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
django列表筛选功能的实现代码
2020/03/27 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
后勤工作职责
2013/12/22 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
工程服务质量承诺书
2015/04/29 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书