控制input输入框光标的位置金沙官网线上

方法一:使用CSS溢出省略的方式解决

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

解决效果如下:

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

金沙官网线上 1

<!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>

css代码:

查看效果

            display: -webkit-box;
            display: -moz-box;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:2;   /*显示行数*/

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

 

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

方法二:使用jQuery截取替换文本内容的方式解决

上面的代码可以选中输入框的全部内容, 等同于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>

金沙官网线上 2

查看效果 

 js代码:

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

    $(".text").each(function() {
        if ($(this).text().length > 20) {//要求字数大于20才进行字数替换
            $(this).html($(this).text().replace(/s+/g, "").substr(0, 80) + "...")
            //从0到80开始替换,将剩余文本内容替换为"..."
        }
    })
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,右边界默认是文本内容的长度值。

本文由金沙官网线上发布于Web前端,转载请注明出处:控制input输入框光标的位置金沙官网线上

您可能还会对下面的文章感兴趣: