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 tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
小程序关于请求同步的总结
May 05 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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学习之正则表达式
2011/04/17 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
在vue中使用Base64转码的案例
2020/08/07 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python基于select实现的socket服务器
2016/04/13 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python如何把字符串类型list转换成list
2020/02/18 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
如何让Java程序执行效率更高
2014/06/25 面试题
公司年会晚宴演讲稿
2014/01/06 职场文书
公司周年庆典致辞
2015/07/30 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电