Vue中div contenteditable 的光標(biāo)定位方法

更新時間：2018年08月25日 11:54:50 作者：CloudJay_喵喵喵

今天小編就為大家分享一篇Vue中div contenteditable 的光標(biāo)定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在Vue做項目時,做了一個div[contenteditable=true]的組件作為文本輸入框

在非手動輸入值后,光標(biāo)會丟失,經(jīng)測試以下這段代碼可用,直接將光標(biāo)定位到最后

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下所有子內(nèi)容
   range.collapseToEnd(); //光標(biāo)移至最后
  } 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); //光標(biāo)移至最后
   range.select();
  }
 }

在實際使用時,vue.$emit是一個異步函數(shù),最好在調(diào)用這個定位前加上一定的延遲,經(jīng)測試,5ms就可以了

setTimeout(()=>{
 keepLastIndex(e.target)
},5)

以上這篇Vue中div contenteditable 的光標(biāo)定位方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼
本篇文章主要介紹了基于Vue實現(xiàn)后臺系統(tǒng)權(quán)限控制的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
vue不操作dom實現(xiàn)圖片輪播的示例代碼
這篇文章主要介紹了vue不操作dom實現(xiàn)圖片輪播的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
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)實時天氣
這篇文章主要為大家詳細(xì)介紹了Vue如何利用高德地圖API實現(xiàn)實時天氣,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
vue實現(xiàn)el-select默認(rèn)選擇第一個或者第二個
這篇文章主要介紹了vue實現(xiàn)el-select默認(rèn)選擇第一個或者第二個，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
前端Vue項目部署到服務(wù)器的全過程以及踩坑記錄
使用Vue做前后端分離項目時,通常前端是單獨部署,用戶訪問的也是前端項目地址,因此前端開發(fā)人員很有必要熟悉一下項目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項目部署到服務(wù)器的全過程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下
2023-05-05
vue?+?electron應(yīng)用文件讀寫操作
這篇文章主要介紹了vue?+?electron應(yīng)用文件讀寫操作,如果要制作的應(yīng)用并不復(fù)雜，完全可以將數(shù)據(jù)存儲在本地文件當(dāng)中，然后應(yīng)用就可以通過這些文件進(jìn)行數(shù)據(jù)的讀寫，需要的朋友參考下吧
2022-06-06
vue-element-admin如何轉(zhuǎn)換成中文
這篇文章主要介紹了vue-element-admin如何轉(zhuǎn)換成中文問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03