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光标位置插入文字并移动光标到文字末尾的更多相关文章

  1. textarea在光标位置插入文字

    最近开发类似计算器界面,需要在textarea中编辑公式,涉及到 在光标位置插入 字符. 效果如下: + - * / 添加文字 // html代码如下: <!doctype html> & ...

  2. js 在光标位置插入内容

    原文:https://blog.csdn.net/smartsmile2012/article/details/53642082 createDocumentFragment()用法: https:/ ...

  3. div 可编辑--获取光标位置插入元素

    <!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Language" ...

  4. JQuery在光标位置插入内容

    (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var $t = $(this)[0]; //IE if (docume ...

  5. 【转】怎么给javascript + div编辑框光标位置插入表情文字等？

    最近刚好碰到这个问题,虽然离提出问题已经过了半年了,本着前人栽树后人乘凉的精神,还是回答一下.效果: &amp;amp;amp;lt;img src="https://pic2.zh ...

  6. query或者JavaScript实现在textarea光标处插入文本

    1.Jquery函数实现: $(function() { /* 在textarea处插入文本--Start */ (function($) { $.fn.extend({ insertContent ...

  7. JS在可编辑的div中的光标位置插入内容或表情

    <input type="button" value="插入字符" onclick="document.getElementById('test ...

  8. winform中RichTextBox在指定光标位置插入图片

    代码如下: //获取RichTextBox控件中鼠标焦点的索引位置 int startPosition = this.richTextBox1.SelectionStart; //从鼠标焦点处开始选中 ...

  9. textarea光标处插入文字

    (function($) { $.fn.extend({ //myField 对象元素 myValue 插入值 insertAtCursor: function(myField,myValue) { ...

随机推荐

  1. Win10 设备补丁更新

    用户对客户端设备补丁更新保持怀疑态度,因为他们担心他们的计算机会在未经许可的情况下突然自己重启,丢失数据.虽然,您可以在更新后推迟重新启动并安排选择的时间,具体取决于更新Windows在未经您许可的情 ...

  2. 什么是 pwd

    pwd print work directory, 指linux terminal的当前目录 $ pwd

  3. MySQL 开机自启动

    MySQL 开机自启动 chkconfig add mysqld 或者 echo "/usr/local/mysql/bin/mysqld_safe --defaults-file=/etc ...

  4. HDU 1532

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1532 题意: 三叶草是这个人的最喜欢的植物,结果下雨淹没了他家里,要排水,一个点到一个点的排水速度已知 ...

  5. B. Qualifying Contest_排序

    B. Qualifying Contest time limit per test 1 second memory limit per test 256 megabytes input standar ...

  6. 配置伪静态（URL重写）

    本篇借鉴了很多文章,这里做个记录. 有时我们的导航栏出现xx.aspx?id=x&name=xx 等等这样,会显得不好看,我们可以利用伪静态来美化我们的导航栏,伪静态的形式可以自己定义,本质还 ...

  7. 用纯css改变默认的radio和checkbox的样式

    利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: css改变默 ...

  8. ReactiveObjC框架的简单介绍

    最近在一直在学习RAC框架的Object-C版本ReactiveObjC(Swift版本为ReactiveSwift),这篇文章简单展示一下学习的成果!!!如果有什么地方理解错误,欢迎大家指正!!!互 ...

  9. 小程序weapp的状态管理 Wenaox

    Wenaox wechat state management 特点 支持中间件 中大型项目可多个 contro 区分模块 asyncs 自带 loading 轻量.性能好 安装 npm i -S we ...

  10. C++声明之CV限定符

    目录 1.const 1.1 const obj 如果调用 non-const member fun会编译出错 经典错误 1.2 例子:STD里的操作符重载 1.3 例子:<cpp primer ...