input光标位置设置至行末端

本文主要是介绍input光标位置设置至行末端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近接到了一个很尬的需求..

这个需求是这样的… 再点击input框的时候光标要始终保持在内容的行末端

emm.. 废话少说，直接上代码！
Js：

end: function (item) {var obj = document.getElementsByClassName(item)[0]obj.focus();var len = obj.value.length;if (document.selection) {var sel = obj.createTextRange();sel.moveStart('character', len);sel.collapse();sel.select();} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {obj.selectionStart = obj.selectionEnd = len;}}

Html：

<input type="text" v-model="insured.name" @click="end('inputEnd1')" class="inputEnd1">

代码解读：

上述代码在点击input框的时候会调用end这个方法，会穿进去一个参数，这个参数我用的是对应input框的class名称，在end方法会去取到对应class的元素，然后在依次进行逻辑判断处理

执行完以上代码后，再点击input框的时候光标会始终保持在行末哦~

注：
最后再补充一下，如果您的input是循环出来的话，可以根据

:class="item.addItemClass"

去动态获取他的class

这篇关于input光标位置设置至行末端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---