javascript实现在textarea光标位置插入文字并移动光标到文字末尾
1.背景：实现在textarea光标位置插入文字并移动光标到文字末尾
如果每次通过val("ss")赋值的形式插入文字到textarea中，会将上一次赋的值覆盖掉。
2.思路：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Sliding Menu Effect</title>
<script type="text/javascript" language="javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function insertText(obj,str) {
if (document.selection) {
var sel = document.selection.createRange();
sel.text = str;
} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
var startPos = obj.selectionStart,
endPos = obj.selectionEnd,
cursorPos = startPos,
tmpStr = obj.value;
obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
cursorPos += str.length;
obj.selectionStart = obj.selectionEnd = cursorPos;
} else {
obj.value += str;
}
}
function moveEnd(obj){
obj.focus();
var len = obj.value.length;
if (document.selection) {
var sel = obj.createTextRange();
sel.moveStart('character',len);
sel.collapse();
sel.select();
} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
obj.selectionStart = obj.selectionEnd = len;
}
}
</script>
</head>
<body>
<input type="button" onclick="insertText(document.getElementById('text'),' 插入字符啊啊啊啊')" value="插入文字"></input>
<input type="button" onclick="moveEnd(document.getElementById('text'))" value="光标移到末尾"></input>
<textarea name="" id="text" cols="30" rows="10"></textarea>
</body>
</html>
javascript实现在textarea光标位置插入文字并移动光标到文字末尾的更多相关文章
- textarea在光标位置插入文字
最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...
- js 在光标位置插入内容
原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...
- div 可编辑--获取光标位置插入元素
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Language" ...
- JQuery在光标位置插入内容
(function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...
- 【转】怎么给javascript + div编辑框光标位置插入表情文字等？
最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;lt;img src="https://pic2.zh ...
- query或者JavaScript实现在textarea光标处插入文本
1.Jquery函数实现: $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent ...
- JS在可编辑的div中的光标位置插入内容或表情
<input type="button" value="插入字符" onclick="document.getElementById('test ...
- winform中RichTextBox在指定光标位置插入图片
代码如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中 ...
- textarea光标处插入文字
(function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...
随机推荐
- 一次ddos攻击
公司lvs的vip受到攻击,表现现象为: 1)vip所有服务器没有什么连接,大量的无效connection 2)网卡流量很大 停用vip,流量下降,临时解决攻击问题.但是这只是治标不治本,如果攻击方变 ...
- thinkphp的find()方法获取结果
find方法返回的是一行记录,结果是一个数组,数组的key和sql中的field相对应,假设: $res=$model->find(filed="a,b,c"); 获取结果中 ...
- 笨办法学Python（二十六）
习题 26: 恭喜你,现在可以考试了! 你已经差不多完成这本书的前半部分了,不过后半部分才是更有趣的.你将学到逻辑,并通过条件判断实现有用的功能. 在你继续学习之前,你有一道试题要做.这道试题很难,因 ...
- QR分解与最小二乘（转载自AndyJee）
转载网址:http://www.cnblogs.com/AndyJee/p/3846455.html 主要内容: 1.QR分解定义 2.QR分解求法 3.QR分解与最小二乘 4.Matlab实现 一. ...
- Illegal access：this web application instance has been stopped already
七月 23, 2014 2:34:35 下午 org.apache.catalina.loader.WebappClassLoader loadClass信息: Illegal access: thi ...
- MySQL 开机自启动
MySQL 开机自启动 chkconfig add mysqld 或者 echo "/usr/local/mysql/bin/mysqld_safe --defaults-file=/etc ...
- Netbackup：nbu常见错误及故障解决
Veritas Netbackup 提供了强大的故障响应功能, 能够有效及时的处理 各种备份故障.主要有备份状态码(status) .错误信息.报告信息及调试日志.下面我们主要针对备份状态码讲解下各种 ...
- Android开发之动态创建多个按钮
//获取屏幕大小,以合理设定 按钮 大小及位置 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDispl ...
- 第1章-如何使用本书—零死角玩转STM32-F429系列
第1章 如何使用本书 1.1 本书的参考资料 集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com ...
- Java关键字transient和volatile小结
转自:http://heaven-arch.iteye.com/blog/1160693 transient和volatile两个关键字一个用于对象序列化,一个用于线程同步,都是Java中比较高阶的话 ...