資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 JavaScript 中設定內容可編輯元素的游標位置？
在 HTML 中，內容可編輯的 div 允許使用者編輯 div 元素的內容。我們需要將 contenteditable 屬性設定為 true 布林值才能使任何 div 元素可編輯。
內容可編輯的 div 預設包含插入符游標，有時我們可能需要設定內容可編輯 div 元素中的插入符游標位置來編輯 div 的內容。但是，我們可以在內容可編輯的 div 中點選特定位置來設定插入符游標位置。
本教程將教我們使用不同的示例來在自定義位置設定插入符游標。
語法
使用者可以按照以下語法在內容可編輯的 div 中自定義位置設定插入符游標。
var selectedText = window.getSelection(); var selectedRange = document.createRange(); selectedRange.setStart(text_div.childNodes[0], 45); selectedRange.collapse(true); selectedText.removeAllRanges(); selectedText.addRange(selectedRange); text_div.focus();
在上述語法中，我們建立了一個範圍並將其新增到選定文字中，之後，為了顯示游標，我們關注了內容可編輯的 div。
步驟
使用者可以按照以下步驟在內容可編輯的 div 中自定義位置設定插入符游標。
步驟 1 − 首先，使用 id、名稱、標籤等獲取內容可編輯的 div。
步驟 2 − 之後，使用 window 物件的 getSelection() 方法從視窗中選擇文字。
步驟 3 − 接下來，我們需要使用 createRange() 方法建立一個範圍。
步驟 4 − 使用 range 物件的 setStart() 方法，並透過傳遞值作為引數來設定游標的起始位置。
步驟 5 − 接下來，使用 collapse 方法並將 true 布林值作為引數傳遞，以在 div 元素的邊界處摺疊所有範圍。
步驟 6 − 之後，使用 removeAllRange() 方法從文字中刪除所有以前的範圍。
步驟 7 − 現在，我們需要使用 addRanges() 方法在刪除範圍後將範圍新增到選定文字。
步驟 8 − 使用 focus 方法將焦點設定到內容可編輯的 div 元素上。
示例
在下面的示例中，我們建立了 div 並向 div 元素中添加了一些文字。此外，我們還向 div 元素添加了 contenteditable 屬性以使其可編輯。
之後，我們使用了上述演算法在自定義位置設定插入符游標。在輸出中，使用者可以觀察到，當他們重新整理網頁時，它會在內容可編輯的 div 中第 45 個位置設定游標。
<html>
<body>
<h2>Setting up the <i> custom cursor position </i> in the content editable div</h2> <br>
<div id = "text_div" contenteditable = "true" spellcheck = "false" style = "caret-color:red">
This is a text of the content editable div. Users can click anywhere to place the cursor position. The cursor color is red. The initial cursor position is 45.
</div>
<script>
// select content editable div element
var text_div = document.getElementById("text_div");
// select text from a window
var selectedText = window.getSelection();
// create a range
var selectedRange = document.createRange();
// set starting position of the cursor in the texts
selectedRange.setStart(text_div.childNodes[0], 45);
// collapse the range at boundaries
selectedRange.collapse(true);
// remove all ranges
selectedText.removeAllRanges();
// add a new range to the selected text
selectedText.addRange(selectedRange);
// focus the cursor
text_div.focus();
</script>
</body>
</html>
示例
在下面的示例中，我們建立了 range 輸入，它獲取使用者的游標位置。之後，當用戶點選按鈕時，以下程式碼將獲取輸入值並透過將輸入值作為引數來呼叫 setCusorPosition() 函式。
在 setCusorPosition() 函式中，我們編寫了根據所解釋的演算法在自定義位置設定游標的程式碼。此外，我們還使用了 try-catch 塊來捕獲錯誤。
在輸出中，使用者可以觀察到，設定較大的值作為輸入會顯示錯誤訊息。
<html>
<body>
<h2>Setting up the <i> custom cursor position </i> in the content editable div</h2><br>
<div id="editable_div" contenteditable="true" spellcheck="false" style="caret-color:blue">
TutorialsPoint is the best platform to learn programming languages such as JavaScript, TypeScript, HTML, CSS, ReactJS, Java, Python, C, C++, etc. TutorialsPoint also provides the best courses to learn particular programming languages from different tutors. Students can choose their favourite tutor's course and learn concepts related to computer science with full fun.
</div> <br />
<input type = "number" id = "cursor_range" min = "0" value = "0" max = "500" /> <br> <br>
<div id = "output"> </div>
<button id = "button"> Set cursor position </button>
<script>
let output = document.getElementById('output');
function setCursorPosition(customPosition) {
try {
evar element = document.getElementById("editable_div");
evar selected = window.getSelection();
evar range = document.createRange();
erange.setStart(element.childNodes[0], customPosition);
erange.collapse(true);
eselected.removeAllRanges();
eselected.addRange(range);
element.focus();
output.innerHTML = "";
} catch (error) {
output.innerHTML = "The error is " + error.message;
}
}
let btn = document.getElementById('button');
btn.addEventListener('click', () => {
let value = document.getElementById('cursor_range').value;
setCursorPosition(value)
})
</script>
</body>
</html>
使用者學習瞭如何使用 JavaScript 在內容可編輯的 div 中設定游標位置。在第一個示例中，我們將游標設定在第 45個位置，在第二個示例中，我們從使用者那裡獲取了自定義位置。
10K+ 瀏覽量
