input、textarea设置光标位置 | ele.setSelectionRange()

拼搏现实的明天。 2023-02-20 02:58 282阅读 0赞

> 点击按钮触发textarea的focus时，默认光标的位置在最左边；
> 
> 需求：focus时让光标的位置处于最右侧

--------------------

# Code #

// HTML
    <button onclick="setPostion()">click</button>
    <textarea id="textarea">123456789</textarea>

//JS
    function setPosition() {
        let ctrl = document.getElementByID('textarea');
        if (ctrl.setSelectionRange) {
              //非ie
              ctrl.focus(); // 获取焦点
              ctrl.setSelectionRange(-1,-1); // 设置选定区的开始和结束点
        } else if (ctrl.createTextRange) {
              var range = ctrl.createTextRange(); // 创建选定区
              range.collapse(true); // 设置为折叠,即光标起点和结束点重叠在一起
              range.moveEnd("character", pos); // 移动结束点
              range.moveStart("character", pos); // 移动开始点
              range.select(); // 选定当前区域
        }
    }

# [setSelectionRange()][setSelectionRange] #

> **`HTMLInputElement.setSelectionRange` **方法用于设定[`<input>`][input] 或 [`<textarea>`][textarea] 元素中当前选中文本的起始和结束位置。

<table> 
 <tbody> 
  <tr> 
   <td style="width:136px;">属性</td> 
   <td style="width:627px;">含义</td> 
  </tr> 
  <tr> 
   <td style="width:136px;">selectionStart</td> 
   <td style="width:627px;">起始位置</td> 
  </tr> 
  <tr> 
   <td style="width:136px;">selectionEnd</td> 
   <td style="width:627px;">结束位置</td> 
  </tr> 
  <tr> 
   <td style="width:136px;">selectionDirection</td> 
   <td style="width:627px;">forward、backward、none，三种选择方向，默认为forward从前向后</td> 
  </tr> 
 </tbody> 
</table>

--------------------

setSelectionRange(1,4)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70][]

setSelectionRange(-1,-1)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1][]

[setSelectionRange]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement/setSelectionRange
[input]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
[textarea]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200622185758934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200622185724529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MTU3MDg1,size_16,color_FFFFFF,t_70