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 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JS常用知识点整理
Jan 21 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 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
You might like
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript getElementsByClassName实现代码
2010/10/11 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Django admin组件的使用
2020/10/24 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
小学生获奖感言范文
2014/02/02 职场文书
质量承诺书格式
2014/05/20 职场文书
爬山的活动方案
2014/08/16 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
繁星春水读书笔记
2015/06/30 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle