有沒有辦法讓用戶使用javascript和css鍵入textarea內容樣式？

Question

我很好奇，如果有一種方式來作爲用戶類型的textarea風格的內容。

例如：

<textarea>abcdefghijklmnopqrstuvwxyz</textarea> 

我能突出使用javascript屏幕上面textarea的字符串中的所有元音？但是當表單提交時仍然只發送字符串？

Answer 1

您可以使用div和contentEditable屬性而不是textarea，並在那裏進行高亮顯示。

https://developer.mozilla.org/en-US/docs/HTML/Content_Editable

你仍然需要這個div的內容複製到表單中的隱藏字段，如果你需要將它張貼。

Answer 2

你可以看到其中一個問題的靈感。

• Textarea that can do syntax highlighting on the fly?
：他們對現場語法高亮所以這不正是你問，但也許足夠接近，和語法高亮似乎是一個比較常見的問題，所以它更容易找到一些現成的解決方案具體談
• Are there any JavaScript live syntax highlighters?
• https://stackoverflow.com/questions/1505761/textarea-with-syntax-code-highlighting
• Live text color change in javascript

Answer 3

給一些id到TEX利亞和約束其onkeyup事件與jQuery function.something這樣

$('#id_of_textarea').bind('keyup', function() { 
//for displaying vowels on screen 
var str=$('#id_of_textarea').val(); 
var total_findVowels=""; 
for (var i = 0; i < str.length; i++) { 
if (str.charAt(i).match(/[a-zA-Z]/) != null) { 
// findVowels 
if (str.charAt(i).match(/[aeiouAEIOU]/)) 
{ 
    total_findVowels=total_findVowels+str.charAt(i);    
} 
} 
//use some label to display all vowels 
    $("#some_lbl").text(total_findVowels); 
}//for 
}); 

Answer 4

如果beeing精確，只回答你的問題： 有沒有辦法做到這一點，但其他人說有其他的方法來解決你的任務

Answer 5

試試這個

<div contenteditable="true"> 
      This text can be edited by the user. 
</div> 

Answer 6

我用下面的snipplet：

$("#yourtextarea").bind("keyup input paste", parseAndReplaceContent); 

我的parseAndReplaceContent函數調用jQuery的$("#yourtextarea").val()來訪問和修改數據。