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. JDBC源码解析

    参考:https://blog.csdn.net/silviakafka/article/details/46225045

  2. 安装国际版firefox（火狐浏览器）并设置语言为中文

    访问https://www.mozilla.org/zh-CN/firefox/new/?scene=2下载.安装: 访问https://addons.mozilla.org/zh-CN/firefo ...

  3. HttpWebRequest类之基本定义

    HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位 于System.Net命名空间,默认情况下这个类对于控制台程 ...

  4. django生命周期示意图

    1.图示

  5. python备份mysql数据库

    介绍使用python结合mysqldump对mysql数据库进行备份 import os import sys import configparser import time def test_fil ...

  6. class 类 this指向的问题

    ES6 实现了类的概念 class Prosen { } ES5使用函数模拟 function Prosen() { } ES6中的 class定义一个类, 其内部包含 constructor构造函数 ...

  7. jQuery、Angluar、Avalon对比

    最近在慕课网看一些关于avalon的视频,记录下一些笔记及代码实例以便日后自己复习可以用到,另外也可以给不想花时间看视频的小伙伴提供一丝丝帮助 这里主要是做一个简单的todolist 分别用三种不同的 ...

  8. 【例题收藏】◇例题·III◇ 木と整数 / Integers on a Tree

    ◇例题·III◇ 木と整数 / Integers on a Tree 只需要一个美妙的转换,这道题就会变得无比美妙…… 来源:+AtCoder 2148(ARC-063 E)+ ◆ 题目大意 给定一棵 ...

  9. Java - 得到项目中properties属性文件中定义的属性值

    public static String getPropertiesValue(String fileName, String key) {   return ResourceBundle.getBu ...

  10. Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

    0. 前言 早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章,当时也是我在做自己一个个人项目时遇到的配置问题,想到别人也可能遇到跟我同样的问题,就把配置的思 ...