我目前正在嘗試為我的 Svelte 應用程式構建一個增強的文本輸入組件，這將使用戶可以輕松輸入化學公式/方程式，但是當嘗試創建將在文本輸入時將游標移動到正確位置的代碼時點擊，我遇到了問題。
我當前的 HTML 布局類似于以下內容：
<div class="input-field" contenteditable>
<span class="left"> /* text left of the cursor goes here */ </span>
<span class="caret"></span>
<span class="right"> /* text right of the cursor goes here */ </span>
</div>
<textarea class="input-textarea"></textarea>
我正在使用文本區域來監視事件，input并keydown使用這些事件中的資訊將正確的文本/特殊字符插入到input-fielddiv 中。div 是 contenteditable，因為我希望能夠看到用戶試圖將插入符號放在哪里，將真正的插入符號焦點轉移到文本區域，并將我的模擬插入符號移動到適當的位置。
input-field在將焦點轉移到 textarea 之前嘗試從 div 檢索游標位置時會出現此問題。如果任何地方都有任何代碼試圖隨時將焦點轉移到文本區域，那么回傳的結果getSelection()將被破壞。如果textarea.focus()同步完成，使用 Promise 異步完成，異步使用setTimeout，甚至放置在完全不同時間運行的不同函式中（由來自用戶的不同事件觸發），就會發生這種情況。洗掉此focus呼叫會使getSelection結果再次正確。textarea 和 input 元素都會出現此問題。
getSelection由以下兩種方式之一破壞回傳的結果：
- 錨點/焦點/基礎/范圍元素都是
body元素或#svelte元素（包裝頁面中所有內容的div）。這不是結果應該是的，它應該是.leftor.right。偏移量也都是不正確的。 - 直接回傳的結果
getSelection是正確的，但是訪問結果的任何屬性都不會給出正確的值。這很奇怪，我無法想象為什么代碼行之間的值會有所不同，或者取決于尚未執行的代碼行。selection下面是一個又selection.anchorNode一個被記錄時的輸出影像。
這種行為非常奇怪，我很難找到這些巨大不一致的解決方法。任何幫助解釋正在發生的事情將不勝感激。下面是我為演示此錯誤而制作的測驗頁面。
<!DOCTYPE html>
<html>
<head>
<script>
function handleFocus() {
let textarea = document.getElementById('textarea')
console.dir(document.getSelection())
setTimeout(() => {
textarea.focus()
})
}
</script>
<style>
</style>
</head>
<body>
<div contenteditable tabindex="1" onfocus="handleFocus()">This is some sample text, click on me</div>
<textarea id="textarea" tabindex="1"></textarea>
</body>
</html>uj5u.com熱心網友回復：
由于 getSelection 僅在事件發生后才正確，因此您必須不在處理程式中而是在之后呼叫 getSelection。您可以通過在 setTimeout 中呼叫處理程式來執行此操作，因為這會將其置于事件回圈的最后。這將是苗條的作業解決方案：
<script>
import {tick} from 'svelte'
let textarea;
let div;
function handleFocus() {
setTimeout(() => {
const focusOffset = window.getSelection().focusOffset
console.log(focusOffset)
textarea.focus()
}, 0)
}
</script>
<div bind:this={div} contenteditable on:focus="{handleFocus}">This is some sample text, click on me</div>
<textarea bind:this={textarea} class="input-textarea"></textarea>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/423071.html
標籤：
上一篇：嘗試創建是否停止獲取高于20的數字javascript
下一篇：Canvas占用父div的空間