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 相关文章推荐
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
学习Angularjs分页指令
Jul 01 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
浅谈JS的二进制家族
May 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
DISCUZ 分页代码
2007/01/02 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
javascript document.images实例
2008/05/27 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
2013/08/19 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jquery使用经验小结
2015/05/20 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
jquery延迟对象解析
2016/10/26 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
机械设计及其自动化求职推荐信
2014/02/17 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
班级课外活动总结
2014/07/09 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
学校德育工作总结2015
2015/05/11 职场文书
法定代表人免职证明
2015/06/24 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs
利用Python实现模拟登录知乎
2022/05/25 Python