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 相关文章推荐
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
vuex实现数据状态持久化
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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
跟老齐学Python之Python文档
2014/10/10 Python
Django发送html邮件的方法
2015/05/26 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
Python 代码调试技巧示例代码
2020/08/11 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
C语言笔试集
2012/07/24 面试题
机工车间主任岗位职责
2014/03/05 职场文书
学习雷锋倡议书
2014/04/15 职场文书
借名购房协议书范本
2014/10/06 职场文书
办公室卫生管理制度
2015/08/04 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android