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) { ...
随机推荐
- C#保存图片到数据库并读取显示图片的方法
private void button2_Click_1(object sender, System.EventArgs e) { string pathName; if (this.openFile ...
- ansible安装php
环境:Centos 7.x 独立php-fpm.conf配置文件 [root@master playbook]# tree php php ├── php-fpm.conf └── php.yml p ...
- Node.js-Webstorm2018配置nodejs
网上都是webstorm老版本的设置方法!根本就找不到以下配置项: 下面介绍2018版的配置方式.功能:使webstrom支持node.js语法检测及语法提示! 例如:配置前,没有任何提示 配置后 配 ...
- window下mycat要放在根目录下
原理文档没有跟我开玩笑呢? 建议放在盘符根目录下 ,无视的我,检查了多遍jdk环境,检查了多遍bat文件内容,仍然没有解决 找不到或无法加载主类 直到我乖乖的把目录放跟盘符才解决,心好累= =! 可能 ...
- IOS 获取.plist文件的数据
@property (nonatomic,strong) NSArray *apps; //获取.plist数据 /**获取plist文件的数组数据*/ -(NSArray *)apps{ if( ...
- Android（java）学习笔记97：使用GridView以及重写BaseAdapter
1. BaseAdapter: 对于ListView.GridView.Gallery.Spinner等等,它是它们的适配器,直接继承自接口类Adapter的,使用BaseAdapter时需要重写很多 ...
- 百度Ueditor 图片上传无反应，显示上传0张，不能点确定
解决办法: \Data\Ueditor\php\Uploader.class.php 190行左右 /** * 获取文件扩展名 * @return string */ private function ...
- 深入浅出：了解jsonp跨域的九种方式
什么是“”跨域”: 跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容.由于安全原因,跨域访问是被各大浏览器所默认禁止的.当一个域与其他域建立了信 ...
- BZOJ1901: Zju2112 Dynamic Rankings(整体二分 树状数组)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 9094 Solved: 3808[Submit][Status][Discuss] Descript ...
- mybatis中oracle转mysql
刚来公司实习,遇到的第一个任务就是这个,简单记录一下思路过程.人菜的很,没啥参考价值. 测试时: 将现有的oracle库转为mysql: 用的Navicat自带数据传输功能,简单粗暴 出现的问题: 1 ...