記錄一下js游標位置及複製和剪下板
前言
關於游標位置,copy與剪下板等,部落格中總結的比較少,翻了一下,很久之前做編輯器的時候,有類似文字javascript獲取iframe中游標所在位置的父節點名稱 ,但是和今天總結的這個還不太一樣。由於專案中用到在input某個游標之後動態插入巨集,用到了游標位置。在這裡記錄一下。
游標位置後插入
其實游標位置後插入,我的做法是很簡單的,就一句話。vue版本如下:
let focusinput = this.inputEl.selectionStart if (this.nowSelect) { item.subsText = `${item.subsText.substr(0, focusinput)}${this.nowLabel}${item.subsText.substring(focusinput, item.subsText.length)}` }
其中this.inputEl就是input元素
item.subsText就是input中文字
this.nowLabel就是要插入的內容
插入就一句話判斷0到selectionStart的位置,然後把文字查到後面就可以了。
封裝方法
網上也有一些封裝的方法,看了一下,大致可以用。如下:
獲取游標位置函式
// 獲取游標位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selection) { // IE Support textDom.focus (); var selectRange = document.selection.createRange(); selectRange.moveStart ('character', -textDom.value.length); cursorPos = selectRange.text.length; }else if (textDom.selectionStart || textDom.selectionStart == '0') { // Firefox support cursorPos = textDom.selectionStart; } return cursorPos; }
設定游標位置函式:
// 設定游標位置 function setCaretPosition(textDom, pos){ if(textDom.setSelectionRange) { // IE Support textDom.focus(); textDom.setSelectionRange(pos, pos); }else if (textDom.createTextRange) { // Firefox support var range = textDom.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }
獲取游標選中文字函式:
// 獲取選中文字 function getSelectText() { var userSelection, text; if (window.getSelection) { // Firefox support userSelection = window.getSelection(); } else if (document.selection) { // IE Support userSelection = document.selection.createRange(); } if (!(text = userSelection.text)) { text = userSelection; } return text; }
選中特定範圍的文字函式:
/** * 選中特定範圍的文字 * 引數: *textDom [JavaScript DOM String] 當前物件 *startPos [Int] 起始位置 *endPos [Int] 終點位置 */ function setSelectText(textDom, startPos, endPos) { var startPos = parseInt(startPos), endPos = parseInt(endPos), textLength = textDom.value.length; if(textLength){ if(!startPos){ startPos = 0; } if(!endPos){ endPos = textLength; } if(startPos > textLength){ startPos = textLength; } if(endPos > textLength){ endPos = textLength; } if(startPos < 0){ startPos = textLength + startPos; } if(endPos < 0){ endPos = textLength + endPos; } if(textDom.createTextRange){ // IE Support var range = textDom.createTextRange(); range.moveStart("character",-textLength); range.moveEnd("character",-textLength); range.moveStart("character", startPos); range.moveEnd("character",endPos); range.select(); }else{ // Firefox support textDom.setSelectionRange(startPos, endPos); textDom.focus(); } } }
在游標後插入文字函式:
/** * 在游標後插入文字 * 引數: *textDom [JavaScript DOM String] 當前物件 *value [String] 要插入的文字 */ function insertAfterText(textDom, value) { var selectRange; if (document.selection) { // IE Support textDom.focus(); selectRange = document.selection.createRange(); selectRange.text = value; textDom.focus(); }else if (textDom.selectionStart || textDom.selectionStart == '0') { // Firefox support var startPos = textDom.selectionStart; var endPos = textDom.selectionEnd; var scrollTop = textDom.scrollTop; textDom.value = textDom.value.substring(0, startPos) + value + textDom.value.substring(endPos, textDom.value.length); textDom.focus(); textDom.selectionStart = startPos + value.length; textDom.selectionEnd = startPos + value.length; textDom.scrollTop = scrollTop; } else { textDom.value += value; textDom.focus(); } }
當然,像我的那種簡單的應用場景,對瀏覽器支援不是很高的情況,一句話就可以了!
複製和剪下板
監聽頁面複製,新增一些版權資訊,程式碼如下:
document.addEventListener('copy', function (event) { var clipboardData = event.clipboardData || window.clipboardData; if (!clipboardData) { return; } var text = window.getSelection().toString(); if (text) { event.preventDefault(); clipboardData.setData('text/plain', text + '\n\n haorooms部落格版權所有'); } })
當然,關於複製文字框中的內容,推薦一個外掛:https://clipboardjs.com/#example-target
這個我在專案中有用過。
好,今天就寫到這裡!