爲文本區域加下劃線文本

我想爲<textarea>元素的某些文本片段添加彩色的下襬加下劃線。其效果與拼寫檢查器的效果類似。爲文本區域加下劃線文本

我該如何使用JavaScript，可能在jQuery的幫助下做到這一點？

我對HTML標記的唯一控制是通過JavaScript。我的第一個想法是爲這些文本片段添加樣式，但據我所知，只能對整個textarea元素進行樣式設置，而不是對單個文本片段進行樣式設置。

我知道我正在努力實現的是有可能的，因爲commercial software實現了類似的效果，但我仍在試圖弄清楚涉及到哪些技巧。

2012-09-19 Filipe Correia

正在使用的方法是隱藏textarea並創建一個可編輯的div（將屬性contenteditable="true"添加到div，我不太確定瀏覽器的兼容性）。在每個按鍵上，javascript都會抓取所有內容，查找拼寫錯誤的單詞並在違規單詞周圍放置一段時間。使用css，他們在這個詞下面放了一個扭曲的紅色下劃線（一小段紅色的波形圖）

考慮到這一點，他們需要跟蹤光標在div中的位置，以防用戶啓動在框的中間輸入文本，以便在更改內容後，腳本將光標返回到正確的位置，而不是在內容塊的末尾。

此外，您需要更新每個按鍵上textarea的值。

[編輯]

這裏是概念驗證的的jsfiddle： http://jsfiddle.net/tEnY8/

底線，當你鍵入入禁區，值放入文本區域和任何不正確的話有下劃線和變成紅色。目前它只標記最後一個詞是不正確的。您需要對該行註釋，取消for循環的註釋並實現isMispelled(String)函數。

[編輯]

這裏是概念的進一步證明：http://jsfiddle.net/tEnY8/4/

基本上我已經設置了的拼寫正確的話，那麼，如果陣列中存在的單詞的迴路檢查的陣列;如果沒有，那麼這個詞可能拼錯了。

來源

2012-09-19 10:42:41

謝謝。唯一缺少的是保持跟蹤和恢復光標位置:) 我敢打賭，有一種方法可以用span-wrapped版本替換一個單詞。這將避免替換整個div的內容，因此保持光標位置。 –

我目前正在研究['突出'jquery插件]（http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html）如何工作，但任何指針將不勝感激。 –

正如你所說，它實際上不可能只編輯textarea的一行的字體或屬性。

相反，你有什麼聯繫到正在做的，使用一個可編輯的DIV它，並通過JavaScript和一些聰明的CSS來隱藏文本區域（textarea的本身鏈接這個網站是顯示：無和visibility：hidden的;）

我建議使用firebug來看看他們是如何做到的，因爲它非常令人印象深刻。

來源

2012-09-19 10:39:02 MasNotsram

他們所做的是有一個<div>元素，它們用來完成所有樣式，它看起來像一個textarea。

這篇文章可以幫助你做類似的規定：https://stackoverflow.com/a/3536762/349012

來源

2012-09-19 10:39:25 manavo

我不認爲這是可能的一個textarea內，大多數WYSIWYG編輯器在線使用由CONTENTEDITABLE股利或iframe看起來像一個文本樣式文本在這些元素的innerHTML中，因此顯示在前端，您可以獲取div/iframe的textContent或innerText。使用jQuery你可以做這樣的事情：


<div contenteditable='true' id='editor'>this is the wrd</div> 


$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));

未經測試，但應該正確設計樣式。您可以使用$（'＃editor'）。text（）來檢索文本值。

來源

2012-09-19 10:41:04 nukeem

爲文本區域加下劃線文本

回答

相關問題