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 相关文章推荐
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
js时间控件只显示年月
Jan 08 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
vue v-model动态生成详解
Jun 30 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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字符串过滤,转换函数代码
2012/05/01 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
js二级地域选择的实现方法
2013/06/17 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
关于function类中定义变量this的简单说明
2016/05/28 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python模拟登录12306的方法
2014/12/30 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
解析Python的缩进规则的使用
2019/01/16 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
个人自荐信
2013/12/05 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
初中毕业生自我评价
2015/03/02 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
教你一步步实现一个简易promise
2021/11/02 Javascript