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) { ...
随机推荐
- Java—运算符和流程控制语句
运算符优先级: siwtch语句注意事项: switch 后面小括号中表达式的值必须是整型或字符型 case 后面的值可以是常量数值,如 1.2:也可以是一个常量表达式,如 2+2 :但不能是变量或带 ...
- Java项目性能瓶颈定位
文章目标 当Java项目出现性能瓶颈的时候,通常先是对资源消耗做分析,包括CPU,文件IO,网络IO,内存:之后再结合相应工具查找消耗主体的程序代码.本文主要介绍系统资源消耗的分析过程,以及常用的Ja ...
- VM（xp系统下用虚拟机安装win8 提示 ：units specified don't exist, SHSUCDX can't install）解决方法
改成IDE的模式
- socks v5 协议解析
socks v5是一种用于代理的协议,就是说client用这种协议与server沟通,让server帮忙代访问remote后再将结果通过此协议返给client,所以一般是涉及到3个端,分别是clien ...
- Poj(2240),Floyd求汇率是不是赚钱
题目链接:http://poj.org/problem?id=2240. Floyd算法修改一下,我要最大路径(通过转汇率变到最大)改成max. #include <iostream> # ...
- IDEA的常用操作（快捷键）
IDEA的常用操作(快捷键) Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt ...
- PMVS论文随笔（1）
博客园排版系统真的比较挫,可以访问我的github.io阅读 关于Unit的概念 在pmvs的源代码中,有一个函数是getUnit ,其函数如下(在PMVS2的windows版本代码,optim.cc ...
- vim实用配置
"编码set encoding=utf-8"显示行号set number"语法高亮度显示syntax on "自动缩进set autoindent"t ...
- print_Matrix（Python实现）
num = int(input("Please input a number:")) #矩阵最外层的值 n = num*2 Matrix = [([0] * n)for i in ...
- 我是如何根据豆瓣api来理解Restful API设计的
1.什么是REST REST全称是Representational State Transfer,表述状态转移的意思.它是在Roy Fielding博士论文首次提出.REST本身没有创造新的技术.组件 ...