input 标签闪烁光标原理

最近在做一个新需求，涉及到了input标签的闪烁光标的移动。

其实闪烁光标 是个矩形框，当矩形框的宽度为0时 就变成了闪烁的光标。

 

<input id="inputBox" value="abcdefgh">

inputBox.focus();

 

我们看到闪烁的光标在字符a的前面。这是因为input标签有一个 selectStart 属性 这个属性默认值为0， 通过修改这个属性就能实现光标的定位。 

 

var inputBox = document.getElementById("inputBox");
inputBox.selectionStart = inputBox.value.length - 2;
inputBox.focus();

 

我们看到光标在字符g前面闪烁。 

input标签还有一个selectEnd属性，这个属性和selectStart配合，就能选中一段文本。

var inputBox = document.getElementById("inputBox");
inputBox.selectionStart = inputBox.value.length - 2;
inputBox.selectionEnd = inputBox.value.length;
inputBox.focus();

 

上面一段代码就把文本gh选中了。