在文本區域中獲取和設置文本選擇

我想創建一個textarea，用戶可以在其中選擇文本的一部分，然後根據他們的選擇做出反應。所以，我需要在文本區域中獲取和設置文本選擇

1）獲取選定的文本

2）獲得焦點的位置，如果是在文本區域並沒有選擇

似乎開始和結束位置這樣做的功能是不同的從一個探險家到另一個。那麼有誰能告訴我在Office加載項中做什麼的方法？

我試過以下兩種方法（即選擇myTextarea中的文本的一部分，點擊button，然後調試代碼），它們似乎不是正確的功能。

(function() { 
    "use strict"; 

    Office.initialize = function(reason) { 
     $(document).ready(function() { 
      app.initialize(); 
      $('#button').click(showSelection); 
     }); 
    }; 

    function showSelection() { 
     // way 1 
     console.log(document.selection); // undefined 
     document.getElementById("myTextarea").focus(); 
     var sel = document.selection.createRange(); // Uncaught TypeError: Cannot read property 'createRange' of undefined 
     selectedText = sel.text; 
     // way 2 
     console.log(document.getElementById("myTextarea").selectionstart); // undefined 
     console.log(document.getElementById("myTextarea").selectionend); // undefined 
    } 
})();

此外，這將是巨大的，如果一個也能告訴我如何實現如下的代碼：

1）選擇文本的一部分，從一開始和結束位置

2）設置聚焦在textarea的的某一位置

編輯1：

我只是試圖window.getSelection()我的Excel插件中：

function showselection() { 
    var a = window.getSelection(); 
    var b = window.getSelection().toString(); 
    var c = window.getSelection().getRangeAt(0); 
}

選擇在textarea的文本，並點擊button後，我調試一步一步：第一線做出aa = Selection {anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0, is ...;第二行返回""，第三行得到了一個錯誤Home.js:19 Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.它看起來像選擇還沒有成功地抓住了......

這裏是JSBin沒有Excel插件框架，它返回如上幾乎相同的結果。

來源

2016-05-29 SoftTimur

有幾個問題： 1.您的意思是「焦點位置」是什麼意思？這與用戶的選擇有何不同？ 2.它看起來像是一個ID爲「myTextArea」的DOM對象：你能澄清那是什麼嗎？ –

1.當沒有選擇時，用戶仍然可以點擊textarea並放置焦點，我想獲得它的位置。 2）「myTextArea」只是一個'ms-TextField'（如果他們提供getter和setter，我可以使用其他類的textarea）。 – SoftTimur

使用JQuery。

例如，下面兩行獲取插入符位置：

function showselection() { 
    console.log($('#myTextarea')[0].selectionStart); 
    console.log($('#myTextarea')[0].selectionEnd); 
}

有一些插件：

https://github.com/localhost/jquery-fieldselection

http://madapaja.github.io/jquery.selection/

第二個有幾個短帶按鈕的樣本（我們可能會失去選擇）。你可以使用他們的API，或者查看他們的代碼來查看他們調用哪些JQuery函數。

來源

2016-06-01 21:32:10

用於Office的JavaScript API的一個關鍵特性是它們遵循異步模型（上面爲showSelection（）所寫的代碼似乎是同步的）。我建議您閱讀Excel和 JS API概述頁面，以瞭解它們的工作原理。作爲一個例子，這裏是如何你會從選區中獲取文本：

Word.run(function (context) { 
    var myRange = context.document.getSelection(); 
    context.load(myRange, 'text'); 
    return context.sync().then(function() { 
     log("Selection contents: " + myRange.text); 
    }); 
})

那麼對於你的問題，請澄清在我的評論要求的其他具體。謝謝！

- 邁克爾（PM爲Office插件）

來源

2016-05-31 15:09:42

謝謝你......我應該澄清它主要是用於Excel，textarea是Excel加載項的一部分。我試過'document.getElementById（「myTextarea」）。getSelection（）;'它說'getSelection不是一個函數'... – SoftTimur

我明白了。那麼，您的問題是否與HTML/JS和Excel之間的交互有關？還是僅僅關於任務窗格中的HTML/JS網頁？ –

它只是關於在任務窗格中進入的HTML/JS Excel加載項...對不起，它在開始時不清楚... – SoftTimur

如果需要的選擇就是在HTML頁面中選擇文本（而不是用戶在Excel/Word中選擇），然後有一些好的stackoverflow answers about accessing that selection。

來源

2016-05-31 15:33:02

我很困惑這些答案...似乎解決方案是不同的從一個資源管理器到另一個...我已經嘗試了一些（如OP），但不是全部...也許我應該嘗試JQuery解決方案，因爲默認情況下，Excel加載項使用JQuery？ – SoftTimur

它看起來有一致的方法來訪問所有瀏覽器中的HTML文本選擇（這是你的意思是「資源管理器」？）。例如，window.getSelection（）API似乎在任何地方都受支持。 –

是的，我的意思是「瀏覽器」......如果'window.getSelection（）'適用於所有瀏覽器，那將會很棒。我只是嘗試過，它不能工作的財產...你可以看看我更新的OP？ – SoftTimur

在文本區域中獲取和設置文本選擇

回答

相關問題