有没有办法让用户使用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()来访问和修改数据。