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代码
Jan 01 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JS+CSS实现炫酷光感效果
Sep 05 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
简单的php购物车代码
2020/06/05 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
python修改操作系统时间的方法
2015/05/18 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
出纳员岗位责任制
2014/02/11 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
八达岭长城导游词
2015/01/30 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript