<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

</head>

<body>

<textarea name="" id="edit" cols="100" rows="10"></textarea>

<button onclick="getPos()">获取光标位置</button>

<button onclick="getSelect()">获取选中内容</button>

<button onclick="insert()">插入文本</button>

<script>

    $.extend($.fn,{

        //获取文本框内光标位置

        getSelectionStart: function() {

            var e = this[0];

            if (e.selectionStart) {

                return e.selectionStart;

            } else if (document.selection) {

                e.focus();

                var r=document.selection.createRange();

                var sr = r.duplicate();

                sr.moveToElementText(e);

                sr.setEndPoint('EndToEnd', r);

                return sr.text.length - r.text.length;

            }  

            return 0;

        },

        getSelectionEnd: function() {

            var e = this[0];

            if (e.selectionEnd) {

                return e.selectionEnd;

            } else if (document.selection) {

                e.focus();

                var r=document.selection.createRange();

                var sr = r.duplicate();

                sr.moveToElementText(e);

                sr.setEndPoint('EndToEnd', r);

                return sr.text.length;

            }

            return 0;

        },

        //自动插入默认字符串

        insertString: function(str) {

            $(this).each(function() {

                var tb = $(this);

                tb.focus();

                if (document.selection){

                    var r = document.selection.createRange();

                    document.selection.empty();

                    r.text = str;

                    r.collapse();

                    r.select();

                } else {

                    var newstart = tb.get(0).selectionStart+str.length;

                    tb.val(tb.val().substr(0,tb.get(0).selectionStart) +

                            str + tb.val().substring(tb.get(0).selectionEnd));

                    tb.get(0).selectionStart = newstart;

                    tb.get(0).selectionEnd = newstart;

                }

            });  

            return this;

        },

        setSelection: function(startIndex,len) {

            $(this).each(function(){

                if (this.setSelectionRange){

                    this.setSelectionRange(startIndex, startIndex + len);

                } else if (document.selection) {

                    var range = this.createTextRange();

                    range.collapse(true);

                    range.moveStart('character', startIndex);

                    range.moveEnd('character', len);

                    range.select();

                } else {

                    this.selectionStart = startIndex;

                    this.selectionEnd = startIndex + len;

                }

            });  

            return this;

        },

        getSelection: function() {

            var elem = this[0];  

            var sel = '';

            if (document.selection){

                var r = document.selection.createRange();

                document.selection.empty();

                sel = r.text;

            } else {

                var start = elem.selectionStart;

                var end = elem.selectionEnd;

                var content = $(elem).is(':input') ? $(elem).val() : $(elem).text();

                sel = content.substring(start, end);

            }

            return sel;

        }

    })

</script>

<script>

    function getPos(){

        alert($("#edit").getSelectionStart());

    }

    function getSelect(){

        alert($("#edit").getSelection());

    }

    function insert(){

       $("#edit").insertString("hello");  

    }

</script>

</body>

</html>

　　

js 光标选中 操作的更多相关文章

  1. js光标定位操作

    1. 自动选中区域内容 <html> <meta http-equiv="Content-Type" content="text/html; chars ...

  2. 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、

    ```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...

  3. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  4. nw.js如何处理拖放操作

    nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...

  5. Numeral.js – 格式化和操作数字的 JavaScript 库

    Numeral.js 是一个用于格式化和操作数字的 JavaScript 库.数字可以格式化为货币,百分比,时间,甚至是小数,千位,和缩写格式,功能十分强大.支持包括中文在内的17种语言. 您可能感兴 ...

  6. 【软件编程】乐易贵宾VIP教程 - JS改写+网页操作系列教程

    JS改写系列教程: 1.MD5加密改写教程(爱拍网登录)2.解密如何快速找到真确的js加密算法3.多重MD5加密改写教程(5173登录)4.DZ论坛登录加密改写5.唯品会手机登录加密改写6.新浪微博密 ...

  7. JS实现 键盘操作

    JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...

  8. js中如何操作json数据

    一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...

  9. js数组的操作及数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript">var obj="new1abcdefg".replace(/ ...

随机推荐

  1. python web框架 Django 登录页面

    在django 项目下 创建一个templates 放模板的文件夹 html文件都放在这里 在里面写一个login.html 登录页面 urls.py 加上 login 对应关系 from djang ...

  2. ubuntu下30天自制os 的学习计划

    30天自制os的学习也告一段落,由于有其他更重要的事情要集中精力去处理.书本从15天開始就是多任务了.可是不得不停下一阵子. 以下总结下学习中遇到的一些问题. 1:学习这前14天中.问题最大的是关于G ...

  3. Linux mount Windows目录

    [问题描述] Windows 机器192.168.1.103共享了 /share/yasi 目录,并且赋予了写的权限,在Windows机器下可以用 yasi/pass 登录.在一台CentOS 6.3 ...

  4. 在PL/SQL中如何让程序暂停几秒钟

    在编写PL/SQL中,有时需要程序中暂停几秒钟再继续执行,查了一下,oracle内置有这个功能dbms_lock.sleep(10):不过dbms_lock包需要用户自己安装,演示如下: C:\Doc ...

  5. Elment UI的使用说明

    一. Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率,就如同bootstrap. 2.组件分类 ElementUI  ...

  6. 你知道C语言为什么会有“_”（下划线）吗？

    学过C语言的都知道,变量名只能由字母.数字.下划线组成,且只能以字母或者下划线开头. 学英语时我们都学过连字符(“-”),这个东东主要用来连接单词的.那么C语言为什么不直接 用连字符,而要改用下划线呢 ...

  7. 并发队列ConcurrentLinkedQueue与阻塞队列LinkedBlockingQueue的区别

    1.  介绍背景 在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列. Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是Block ...

  8. Python开篇——Python的哲学

    今天奉上Python设计哲学,宣告着自己正式开始系统的学习Python The Zen of Python, by Tim Peters Beautiful is better than ugly.E ...

  9. sqoop命令，mysql导入到hdfs、hbase、hive

    1.测试MySQL连接 bin/sqoop list-databases --connect jdbc:mysql://192.168.1.187:3306/trade_dev --username ...

  10. 学号20145303 《Java程序设计》第一周学习总结

    学号20145303 <Java程序设计>第一周学习总结 教材学习内容总结 *dos命令行: dir:列出当前目录下的文件及文件名 md:创建目录 rd:删除目录.为空时文件夹(文件夹为空 ...