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) { ...
随机推荐
- 从PeopleEditor控件中取出多用户并更新到列表
如果一个列表中有一个字段类型为用户或用户组,并且设置为用户,允许多值的话,那么用代码进行更新的时候就必须将这个字段的值赋成SPFieldUserValueCollection类型,以下代码即为从Peo ...
- Swagger2：常用注解说明
Swagger2常用注解说明 Spring Boot : Swagger 2使用教程:https://www.cnblogs.com/JealousGirl/p/swagger.html 这里只讲述@ ...
- ASP.NET设置母版页
母版页允许开发人员创建具有指定的可编辑区域的站点级模板.随后,此模板可应用到网站中的 ASP.NET 页面上.这些 ASP.NET 页面只需为母版页中指定的可编辑区域提供相应内容 – 在使用母版页的所 ...
- outlook添加邮箱账户时，测试成功，下一步显示请求失败
今天在给公司同事添加邮箱账户时,全部设置正常,测试也成功了,但是点击下一步时,出现了请求失败的提示. 1. 看到这个提示,我首先重启了一下outlook,发现进去添加还是不行 2.重启了电 ...
- 详细讲解：通过composer安装TP5.1(Thinkphp5.1)
现在TP5越来越火了,TP5也更新到了5.1版本,但是5.1以上版本只能通过composer来进行安装,那么这里贴出详细的步骤 前提:PHP版本必须要5.6以上 参考网址:http://www.thi ...
- windows服务器间文件同步搭建步骤搜集
Rsync https://www.cnblogs.com/janas/p/3321087.html https://yq.aliyun.com/ziliao/110867 subersion协议 h ...
- 屏蔽firefox浏览器连接失败页面的广告
现象 最近一直在使用firefox浏览器(版本:57.0.1(64位)),同步书签特别方便,但是最近发现当访问的一个不存在的网址时,连接失败页面竟然有广告!firefox不是号称没有广告吗? 分析 F ...
- 关于tcp的keepalive
先记录几个要点 只能用在面向连接的tcp中,对应对端的非正常关闭有效(对端服务器重启这种,也是正常关闭,FIN RST包都算) 只要是写入到缓冲区就认为OK,所以UDP不适合,所以如果有正常的网络交互 ...
- Poj(2488)，按照字典序深搜
题目链接:http://poj.org/problem?id=2488 思路:按照一定的字典序深搜,当时我的想法是把所有的可行的路径都找出来,然后字典序排序. 后来,凡哥说可以在搜索路径的时候就按照字 ...
- Django:restframework与缓存By大熊
http://chibisov.github.io/drf-extensions/docs/#cache-key 以上为drf-ext的文档 首先我们要下载两个东西,因为缓存我们用redis所以下 D ...