首頁 >web前端 >js教程 >如何使用 JavaScript 從 TextBox 控制項中檢索選定的文字?

如何使用 JavaScript 從 TextBox 控制項中檢索選定的文字?

Susan Sarandon
Susan Sarandon原創
2024-10-24 22:26:02476瀏覽

How to Retrieve Selected Text from a TextBox Control Using JavaScript?

使用JavaScript 從文字方塊控制項取得選取文字

使用文字方塊時,您可能會遇到擷取選取文字的需要。本文旨在為此任務提供全面的解決方案,解決 Internet Explorer 6 所遇到的問題。

可以使用 JavaScript 的內建屬性來實現文字方塊中文字的選擇。對於符合標準的瀏覽器,selectionStart 和selectionEnd 屬性提供所選文字的範圍。但是,對於 Internet Explorer,需要使用選擇物件來解決問題。

<code class="javascript">function ShowSelection() {
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined) { 
    // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  } else if (document.selection !== undefined) {
    // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}</code>

最初,Internet Explorer 6 中出現了一個問題,導致上述程式碼無法正常運作。為了解決這個問題,在存取選擇物件之前新增了 focus() 呼叫。此外,將 ShowSelection() 函數附加到 onkeydown 事件可為偵測所選文字提供穩定的解決方案。

<code class="javascript">document.onkeydown = function (e) {
  ShowSelection();
};</code>

為了進一步說明,按鈕的問題源自於其在 Internet Explorer 中取消選取文字的固有行為。因此,建議使用簡單的輸入按鈕。透過實作此解決方案,您可以有效地從文字方塊控制項中擷取選定的文本,克服 Internet Explorer 6 遇到的挑戰。

以上是如何使用 JavaScript 從 TextBox 控制項中檢索選定的文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn