一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
前言
前段时间碰到一个需求，在一个原本有默认值的input输入框中，希望得到的效果是页面一进去就获取光标，让用户可以输入内容。但是当我使用 focus获取光标之后，却发现在文字的最前面，哎？这可不太对劲啊。不应该在文字的最后面吗？怎么跑到最前面了呢？
抱着这个困惑，我不信邪的又用原生的写法写了一边一样的代码，发现没毛病。这是咋回事呢？
后来研究了半天才知道是因为页面刚进去的时候，默认内容是空的，所以使用光标也自然而然的在最前面了。
但是这可我的实际需求可不一样，于是我又查阅了半天文档，终于发现，原来在原生里面有一个叫做 setSelectionRange 的方法。那它是做什么的呢？
用官方的话来说是这样的：
HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。
也就是说，用这个方法可以选中输入框中的某一段文字。我们可以巧妙的利用这个特性来实现设置输入框的光标位置这一操作。
基本语法：
inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);
一共有三个参数：
selectionStart： 起始位置selectionEnd：结束位置selectionDirection(可选)：一个表示选择方向的字符串，可能的值有：forward：向前backward：向后none默认值，表示方向未知或不相关。
每次调用这个这个方法都会更新 HTMLInputElement 的 selectionStart, selectionEnd 和 selectionDirection 属性。
接下来我们就来具体操作一下吧！
inputNode.setSelectionRange(0, 3)
选择从0-3的字符。
如果两个参数一致，就得到了一个简易版的设置光标位置的方法。
inputNode.setSelectionRange(5, 5)
但是我们怎么控制光标永远在文字的最后面呢？如果用获取文本长度的方法来设置，多少有点累赘。别慌！我这就教给你一个更加好用的方法！
可以将两个参数都设置为 -1， 这样不管文本框中有多少文本，光标始终都在文本的最后面。
inputNode.setSelectionRange(-1, -1)
这里是效果：
是不是方便很多呢？你学废了吗？
