一：理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd。

selectionStart: 该属性的含义是 选区开始的位置；
selectionEnd: 选区结束的位置。
两个值默认都是为0。
注意： 该属性在chrome，safari和firefox都有用，标准浏览器下使用这两个属性。
我们先来看看如下代码，打印下如下可以看到：

<!DOCTYPE html>

     <html>

        <head>

          <meta charset="utf-8">

          <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

          <title>标题</title>

        </head>

        <body>

          <input id="inputId" type="text" oninput="inputFunc()" onkeyup="keyupFunc()"/>

          <textarea id="textareaId" oninput="textareaFunc()"></textarea>

          <script>

            var inputId = document.getElementById("inputId");

            console.log(inputId.value);

            console.log(inputId.selectionStart);

            console.log(inputId.selectionEnd);

            function inputFunc() {

              console.log(inputId.value);

              console.log(inputId.selectionStart);

              console.log(inputId.selectionEnd);

            }

            function textareaFunc() {

              var textareaId = document.getElementById('textareaId');

              console.log(textareaId.selectionStart);

              console.log(textareaId.selectionEnd)

            }

          </script>

        </body>

    </html>

查看效果

上面两个属性都代表了 选中区域的左右边界。默认值都是为0，当我们使用 focus()方法时，默认的光标在文本框的开头位置。我们可以如下设置该属性值如下：

input.selectionStart = 0; // 选中区域左边界

input.selectionEnd = input.value.length; // 选中区域的右边界

上面的代码可以选中输入框的全部内容, 等同于input.select();
那么我们如何获取选中的文本内容呢？我们可以使用 substring方法截取字符串；比如如下代码：
var text = input.value.substring(input.selectionStart, input.selectionEnd);
比如如下demo，页面上默认有一个输入框，然后输入框默认有值，然后通过上面两个属性selectionStart，selectionEnd 来选中文本，然后通过substring方法输出input的文本。如下代码：

<!DOCTYPE html>

   <html>

      <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <title>标题</title>

      </head>

      <body>

        <input id="inputId" type="text" value="aaabbbbccccdddd"/>

        <script>

          var inputId = document.getElementById('inputId');

          inputId.selectionStart = 2;

          inputId.selectionEnd = inputId.value.length;

          var text = inputId.value.substring(inputId.selectionStart, inputId.selectionEnd);

          alert(text); // 从第三个字符开始 因此输出 abbbbccccdddd

        </script>

      </body>

  </html>

查看效果

因此我们可以对标准浏览器下 对光标位置进行设置，比如页面初始化的时候，我们可以设置光标的位置：如下代码：

input.selectionStart = 1;  // 选中区域的左边界

input.selectionEnd = input.value.length - 1; // 选中区域的右边界

如上代码，在页面初始化的时候 可以设置光标的位置。

IE浏览器下如何实现的呢？
IE浏览器下创建一个文本选取对象，使用 createTextRange()方法；如下代码：

var range = input.createTextRange();

上面的这个选区对象默认包含了input的全部文本内容。但是该选区对象的内容并不会选中。因此需要调用 select()方法；如下代码：
range.select();
我们也可以使用 range.text属性得到选中的文字。
对于标准浏览器下可以使用 selectionStart和selectionEnd属性的方法拿到选区的开始位置和结束位置，那么对于IE浏览器下可以使用 moveStart和moveEnd方法。

二：理解 IE浏览器下的 moveStart 和 moveEnd 方法

这两个方法的选区对象包含input的全部文本内容，所以它的左右边界就是文本的开头和结束位置。

moveStart方法的含义是： 用来移动左边界。如下代码：

rangeObj.moveStart("character", 2); // 最左边界右移2个字符

rangeObj.select(); // 将range包含的区域选中

上面两个方法都需要传入两个参数，第一个参数的可选值有 character(根据字符来偏移), word, sentence, textedit, 第二个参数代表偏移的多少，正负表示方向。
左边界最初默认为0，右边界默认是文本内容的长度值。

注意：rangeObj.select() 方法， 该方法是把range对象中的内容选中；

三：理解setSelectionRange

该方法可以理解为input元素的方法：
HTMLInputElement.setSelectionRange();
该方法的作用是：可以为当前元素内的文本设置选中范围。简单的说，可以通过设置起始于终止位置，来选中一段文本中的一部分。使用方式如下：
inputElement.setSelectionRange(selectionStart, selectionEnd, [selectionDirection]);
参数的含义如下：
selectionStart: 第一个被选中的字符的序号(index), 从0开始的。
selectionEnd: 被选中的最后一个字符的
selectionDirection: 选择的方向，可选值为 forward, backward, 或 none.

我们下面来做一个demo，当鼠标focus input框的时候，文本的内容会被选中，如下代码演示一下：

<!DOCTYPE html>

  <html>

      <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <title>标题</title>

      </head>

      <body>

        <input id="inputId" type="text" value="这是一段测试文本"/>

        <script>

          var inputId = document.getElementById('inputId');

          inputId.addEventListener('focus', function() {

            if(inputId.setSelectionRange) {

              inputId.setSelectionRange(0, inputId.value.length);

            }

          });

        </script>

      </body>

  </html>

查看效果

该方法的在浏览器下的兼容性如下：

属性                    chrome           firefox       IE     opera      safari

setSelectionRange       1.0              1.0          9       8.0        支持

selectionDirection      15               8.0                             支持

一般情况下，主流浏览器都支持的，对于selectionDirection该属性，兼容性虽然不是很好，但是不应该该方法的使用。

控制光标位置

如何通过该方法来控制input标签的光标位置呢？比如在页面初始化的时候，我想默认选中部分文本，如何控制？
下面我们来继续做一个demo，通过点击(focus事件)，来选中input值(除了第一个字符和最后两个字符)，其他的字符都选中，代码改成如下：
inputId.setSelectionRange(1, inputId.value.length - 2);
所有代码如下：

<!DOCTYPE html>

  <html>

      <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <title>标题</title>

      </head>

      <body>

        <input id="inputId" type="text" value="这是一段测试文本"/>

        <script>

          var inputId = document.getElementById('inputId');

          inputId.addEventListener('focus', function() {

            if(inputId.setSelectionRange) {

              inputId.setSelectionRange(1, inputId.value.length - 2);

            }

          });

        </script>

      </body>

  </html>

查看效果

通过上面的基础知识点，我们可以做如下的demo
JS获取文本焦点光标位置，选中起始位置，终止位置 和 选中内容的demo；

代码如下：

<!DOCTYPE html>

  <html>

      <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <title>标题</title>

      </head>

      <body>

        <p>

          <label>点击文本框内容触发事件</label>

          <input type="text" id="txt" value="abcdefghijklmn" onclick="getSelectPosition(this);">

        </p>

        <p>

          <label>焦点位置：</label>

          <input type="text" id="txt1" value="">

        </p>

        <p>

          <label>选中起始位置：</label>

          <input type="text" id="txt2" value="">

          <label>选中结束位置：</label>

          <input type="text" id="txt3" value="">

        </p>

        <p>

          <label>选中内容：</label>

          <input type="text" id="txt4" value="">

        </p>

        <script>

          function getSelectPosition($this) {

            var input1 = document.getElementById("txt1");

            var input2 = document.getElementById("txt2");

            var input3 = document.getElementById("txt3");

            var input4 = document.getElementById("txt4");

            var emptyValue = -1;

            var selectStart;

            var selectEnd;

            var pos;

            var selectText;

            if ($this.setSelectionRange) {

              // 标准浏览器

              selectStart = $this.selectionStart;

              selectEnd = $this.selectionEnd;

              if (selectStart == selectEnd) {

                pos = selectStart;

                selectStart = emptyValue;

                selectEnd = emptyValue;

              } else {

                pos = emptyValue;

              }

              selectText = $this.value.substring(selectStart,selectEnd);

            } else {

              // IE浏览器

              var range = document.selection.createRange();

              selectText = range.text;

              range.moveStart("character",-$this.value.length);

              pos = range.text.length;

              selectStart = pos - (selectText.length);

              selectEnd = selectStart + (selectText.length);

              if(selectStart != selectEnd){

                pos = emptyValue;

              }else{

                selectStart = emptyValue;

                selectEnd = emptyValue;

              }

            }

            input1.value = pos;

            input2.value = selectStart;

            input3.value = selectEnd;

            input4.value = selectText;

          }

        </script>

      </body>

  </html>

查看效果

input 输入框按键盘上键的时候 光标会先到前面去，然后跳到后面来的解决方案如下：

keydown+e.preventDefault(阻止默认事件)的操作来解决；如下代码：

<!DOCTYPE html>

   <html>

      <head>

        <meta charset="utf-8">

        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

        <title>标题</title>

      </head>

      <body>

        <input id="inputId" type="text" value="键盘箭头上下移"/>

        <script>

          var inputId = document.getElementById('inputId');

          inputId.addEventListener('keyup', function(e) {

          });

          inputId.addEventListener('keydown', function(e) {

            e.preventDefault();

          });

        </script>

      </body>

  </html>

控制input输入框光标的位置的更多相关文章

  1. Css——设置input输入框光标颜色

    在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...

  2. 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐 ...

  3. css只改变input输入框光标颜色不改变文字颜色实现方法

    input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...

  4. 控制 input 输入框不能输入中文，即不能在输入框中使用输入法

    设置输入框的样式,代码如下 <span style="font-size:18px;"><input type = "text" id = & ...

  5. 解决ios手机中input输入框光标过长的问题

    修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-siz ...

  6. Html+js 控制input输入框提示

    <input type="text" class="fl plsearch_txt" id="key" value="请输入 ...

  7. input 输入框 光标错位问题 、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题

    在IOS系统下的问题: 搜索出的建议如下: 你应该是用fixed定位做的弹出框,弹出框里面有文本框.fixed在ios上兼容不友好,会造成光标乱跳.建议用better-scroll,或者用absolu ...

  8. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  9. 控制input 输入框的placeholder

    /*webkit placeholder居右*/ ::-webkit-input-placeholder { color: #e7e7e7; text-indent: .3rem; font-size ...

随机推荐

  1. 【Java】XML文件的解析

    import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import ja ...

  2. 以杨辉三角为例，从内存角度简单分析C语言中的动态二维数组

    学C语言,一定绕不过指针这一大难关,而指针最让人头疼的就是各种指向关系,一阶的指针还比较容易掌握,但一旦阶数一高,就很容易理不清楚其中的指向关系,现在我将通过杨辉三角为例,我会用四种方法从内存的角度简 ...

  3. 【Java并发编程】13、forkjoin

    http://www.infoq.com/cn/articles/fork-join-introduction http://www.importnew.com/14506.html Java7中的F ...

  4. Spring全家桶系列–SpringBoot之AOP详解

    //本文作者:cuifuan //本文将收录到菜单栏:<Spring全家桶>专栏中 面向方面编程(AOP)通过提供另一种思考程序结构的方式来补充面向对象编程(OOP). OOP中模块化的关 ...

  5. CSS如何让不相等的字符上下对齐

    最后效果: <div class="main"> <span style="font-size:12px;"><dl class= ...

  6. Html5画钟表盘/指针实时跳动

    1.最终效果 时钟.分钟.秒指针连续移动2.完整代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&q ...

  7. React.js 新手教程

    正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的.比如,像我这样的人:因为迄今为止,我才探索了编程世界6个月.所以,这将是一篇新手村教程! 你只需要拥有对 HTML 和 CSS 的理 ...

  8. Java动态生成类以及动态添加属性

    有个技术实现需求:动态生成类,其中类中的属性来自参数对象中的全部属性以及来自参数对象properties文件. 那么技术实现支持:使用CGLib代理. 具体的实现步骤: 1.配置Maven文件: &l ...

  9. python第四十三天--第三模块考核

    面向对象: 概念:类,实例化,对象,实例 属性: 公有属性:在类中定义 成员属性:在方法中定义 私有属性:在方法中使用 __属性  定义 限制外部访问 方法: 普通方法 类方法: @classmeth ...

  10. shell 的条件表达式及逻辑操作符简单介绍

    查看系统的shell: cat /etc/shells 文件测试表达式: -f 文件  文件存在且为普通文件则真,即测试表达式成立. -d 文件  文件存在且为目录文件则真,即测试表达式成立. -s ...