当用户使用javascript和css键入时,有没有办法设置textarea内容的样式?

时间:2012-10-30 14:32:47

标签: javascript jquery html css forms

我很好奇是否有一种方法可以在用户输入的文本区域中为内容添加样式。

例如:

<textarea>abcdefghijklmnopqrstuvwxyz</textarea>

我可以使用javascript在屏幕上突出显示上面textarea字符串中的所有元音吗?但是仍然只在提交表单时发送字符串?

6 个答案:

答案 0 :(得分:4)

您可以使用div contentEditable属性代替textarea并在那里进行突出显示。

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

如果您需要发布,您仍需要将此div的内容复制到表单的隐藏字段。

答案 1 :(得分:1)

向textarea提供一些id并将其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
} );

答案 2 :(得分:1)

试试这个

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

答案 3 :(得分:0)

你可以看到其中一个问题的灵感。他们专门谈论实时语法高亮,所以它不是你所要求的,但可能足够接近,语法高亮似乎是一个更常见的问题,因此更容易找到一些现成的解决方案:

答案 4 :(得分:0)

准确无误并仅回答您的问题: 没有办法做到这一点,但正如其他人所说,还有其他方法可以解决你的任务

答案 5 :(得分:0)

我使用以下代码段:

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

我的parseAndReplaceContent函数调用jQuery $( "#yourtextarea" ).val()来访问和修改数据。