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) { ...
随机推荐
- April 17 2017 Week 16 Monday
You will find that it is necessary to let things go; simply for the reason that they are heavy. 你会明白 ...
- C# 驱动的mongodb的分页查询简单示例
/// <summary> /// mongodb分页查询 /// </summary> /// <typeparam name="T">< ...
- C# unchecked运算符
一.C# unchecked运算符 unchecked运算符用于取消整型算术运算和转换的溢出检查. 二.提示 默认情况下,都是unchecked选项.因此,只有在需要把几个未检查的代码行放在一个明确标 ...
- C++的队列和pair
C++队列的成员函数: back()返回最后一个元素 empty()如果队列空则返回真 front()返回第一个元素 pop()删除第一个元素 push()在末尾加入一个元素 size()返回队列中元 ...
- 【复杂度分析】loj#6043. 「雅礼集训 2017 Day7」蛐蛐国的修墙方案
感觉有点假 题目大意 数据范围:$n<=100$ 题目分析 由于题目给出的是 置换,所以相当于只需枚举每个环的两个状态. 主要是复杂度分析这里: 一元环:不存在 二元环:特判保平安 三元环:不存 ...
- 基于 win7下虚拟机的 GNSS-SDR安装过程
最近在安装 GNSS-SDR软件时,遇到了很多问题,这里回顾了我的安装过程,罗列了所遇到的问题和解决办法.希望后来者不要再踩这些坑了! 首先,在官方文档中看到,GNSS-SDR目前并不支持直接在 Wi ...
- MySQL时间戳、时间
MySQL中: now():获取当前时间:例:SELECT now(); // 结果:2018-07-03 13:40:14 unix_timestamp():将时间转换为时间戳:例: SELECT ...
- MySQL中事物的详解
1. 事物的定义及特性 事务是一组操作数据库的SQL语句组成的工作单元,该工作单元中所有操作要么同时成功,要么同时失败.事物有如下四个特性,ACID简称“酸性”. 1)原子性:工作单元中所有的操作要么 ...
- JDK1.8简单配置环境变量---两步曲
鄙人最近重新装完系统之后,在安装和配置jdk1.8的时候,发现网上许多教程配置jdk环境变量时都还在沿用传统的方式配置,但是随着技术的更新,完全没有必要那么麻烦了. 下载和安装jdk的教程,在这里就不 ...
- 描述linux目录结构以及目录结构命名规定
FHS全称(Filesystem Hierarchy Standard),中文意思是目录层次标准,是linux的目录规范标准. 详情点击查看 FHS定义了两层规范: 第一层:“/”目录下的各个目录应该 ...