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 相关文章推荐
onpropertypchange
Jul 01 Javascript
js DOM的学习笔记
Dec 22 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
javascript的数组和常用函数详解
May 09 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
简单实现js浮动框
Dec 13 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 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
PHP新手上路(五)
2006/10/09 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
调整PHP的性能
2013/10/30 PHP
php缓冲输出实例分析
2015/01/05 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
javascript学习网址备忘
2007/05/29 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
Python操作列表的常用方法分享
2014/02/13 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python中类型检查的详细介绍
2017/02/13 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
应聘教师推荐信
2013/10/31 职场文书
自我评价格式
2014/01/06 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
家长学校教学计划
2015/01/19 职场文书
维稳承诺书
2015/01/20 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
小学数学教学随笔
2015/08/14 职场文书