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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
vue 权限认证token的实现方法
Jul 17 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 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
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP错误处理函数
2016/04/03 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
详解Django中的form库的使用
2015/07/18 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python字符串的拼接方法总结
2019/11/18 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
大学团日活动总结书
2015/05/11 职场文书