如何在html輸入字段中的單個詞下方顯示彈出式菜單/工具提示

我想在html輸入字段中輸入一些拼寫檢查。爲此，我想突出顯示錯誤的單詞並在該單詞下顯示替代方案。如何在html輸入字段中的單個詞下方顯示彈出式菜單/工具提示

在後臺的功能已經工作，現在我正在使用http://jquery-spellchecker.badsyntax.co/（由siddhartha提到）。我理解並發現瞭如何在富文本字段中完成這些操作，但不是在單行輸入<input type="text" value="Here iz somme...">上。我的問題是，我沒有得到正確的地方單詞選擇框。如果html輸入是「Here iz somme」，然後點擊「Iz」，我不能將彈出窗口放在該文本下面。

這是應該的樣子（想象一下「這裏IZ索姆badlyy speldt worddz」是HTML的輸入值）

enter image description here

來源

2013-03-18 tonymarschall

你的意思是' btevfik 2013-03-18 08:30:45

是的和擴展的問題。 – tonymarschall 2013-03-18 08:31:29

你最初怎麼做？如果你可以以某種方式操縱文本，你可以訪問輸入元素的值，並從那裏繼續我想 – btevfik 2013-03-18 08:36:29

您可以使用jQuery插件。請點擊此處查看

http://jquery-spellchecker.badsyntax.co/

解決方法可以讓你的文本區域看起來像輸入文本，我的意思是風格看起來像輸入字段

HTML：

<textarea id="textarea-content" rows="1" style="width:90%" spellcheck="false">Here iz somme badlyy speldt worddz</textarea>

CSS：

textarea 
{ 
    resize: none; 
    border:solid 1px #d2d2d2; 
    background: #fff; 
    color: #333; 
    height: 44px; 
}

來源

2013-03-18 08:45:40 Siddhartha

感謝您的意見。我使用的就是那個jquery插件，但我無法在輸入字段的錯誤字詞下顯示框。（如上面截圖所示）。擴展我的問題 – tonymarschall 2013-03-18 08:47:02

請檢查編輯答案！ @tonymarschall – Siddhartha 2013-03-18 09:01:57

請看看到BJSpell - 這是在JavaScript一個很好的實現以及可使用的hunspell詞典。

來源

2013-03-18 08:53:17 Andron

感謝您的輸入。在後臺的功能已經在工作。我唯一的問題是，我沒有在正確的地方找到單詞選擇框。我必須延長我的問題。 – tonymarschall 2013-03-18 08:54:59

沒有javascript就很難做到這一點。所以我的建議是使用JavaScript。

如果我們有「這就是我的朋友」，請點擊這裏。當我們點擊某個不好的單詞時，我們用javascript捕獲鼠標位置（我們可以使用jquery），然後在從鼠標位置獲得的位置上顯示彈出框。

來源

2013-03-18 09:05:03

我會試試這個。 – tonymarschall 2013-03-18 09:08:13

如何在html輸入字段中的單個詞下方顯示彈出式菜單/工具提示

回答

相關問題