Vue中div contenteditable 的光標定位方法
更新時間：2018年08月25日 11:54:50 作者：CloudJay_喵喵喵
今天小編就為大家分享一篇Vue中div contenteditable 的光標定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在Vue做項目時,做了一個div[contenteditable=true]的組件作為文本輸入框
在非手動輸入值后,光標會丟失,經(jīng)測試以下這段代碼可用,直接將光標定位到最后
function keepLastIndex(obj) {
console.log(obj)
console.log(window.getSelection)
console.log(document.selection)
if (window.getSelection) { //ie11 10 9 ff safari
obj.focus(); //解決ff不獲取焦點無法定位問題
var range = window.getSelection(); //創(chuàng)建range
range.selectAllChildren(obj); //range 選擇obj下所有子內容
range.collapseToEnd(); //光標移至最后
} else if (document.selection) { //ie10 9 8 7 6 5
var range = document.selection.createRange(); //創(chuàng)建選擇對象
//var range = document.body.createTextRange();
range.moveToElementText(obj); //range定位到obj
range.collapse(false); //光標移至最后
range.select();
}
}
在實際使用時,vue.$emit是一個異步函數(shù),最好在調用這個定位前加上一定的延遲,經(jīng)測試,5ms就可以了
setTimeout(()=>{
keepLastIndex(e.target)
},5)
以上這篇Vue中div contenteditable 的光標定位方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
基于Vue實現(xiàn)后臺系統(tǒng)權限控制的示例代碼
本篇文章主要介紹了基于Vue實現(xiàn)后臺系統(tǒng)權限控制的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue不操作dom實現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
element-ui組件table實現(xiàn)自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實現(xiàn)自定義篩選功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作
這篇文章主要介紹了vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3+TS+Vant3+Pinia(H5端)配置教程詳解
這篇文章主要介紹了Vue3+TS+Vant3+Pinia(H5端)配置教程詳解,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了Vue如何利用高德地圖API實現(xiàn)實時天氣,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
vue實現(xiàn)el-select默認選擇第一個或者第二個
這篇文章主要介紹了vue實現(xiàn)el-select默認選擇第一個或者第二個，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Vue做前后端分離項目時,通常前端是單獨部署,用戶訪問的也是前端項目地址,因此前端開發(fā)人員很有必要熟悉一下項目部署的流程,下面這篇文章主要給大家介紹了關于前端Vue項目部署到服務器的全過程以及踩坑記錄的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue?+?electron應用文件讀寫操作,如果要制作的應用并不復雜，完全可以將數(shù)據(jù)存儲在本地文件當中，然后應用就可以通過這些文件進行數(shù)據(jù)的讀寫，需要的朋友參考下吧2022-06-06
這篇文章主要介紹了vue-element-admin如何轉換成中文問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03