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

猜你喜欢

转载自blog.csdn.net/Shuanger112/article/details/81704208