1. 程式人生 > >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