我很好奇是否有一种方法可以在用户键入时设置文本区域中的内容样式。
例如:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
我可以使用 javascript 在屏幕上突出显示上述 textarea 字符串中的所有元音吗?但仍然只在提交表单时发送字符串?
我很好奇是否有一种方法可以在用户键入时设置文本区域中的内容样式。
例如:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
我可以使用 javascript 在屏幕上突出显示上述 textarea 字符串中的所有元音吗?但仍然只在提交表单时发送字符串?
您可以使用div
withcontentEditable
属性代替textarea
and 在那里进行突出显示。
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
div
如果您需要发布它,您仍然需要将其内容复制到表单的隐藏字段中。
给id
textarea 一些内容并将其onkeyup
事件与 jquery 函数绑定。类似这样的东西
$('#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
} );
尝试这个
<div contenteditable="true">
This text can be edited by the user.
</div>
您可以查看其中一个问题以获得一些灵感。他们专门讨论了实时语法突出显示,所以它不是您所要求的,但可能足够接近,语法突出显示似乎是一个更常见的问题,因此更容易找到一些现成的解决方案:
如果精确并只回答您的问题:没有办法做到这一点,但正如其他人所说,还有其他方法可以解决您的任务
我使用以下代码片段:
$( "#yourtextarea" ).bind( "keyup input paste", parseAndReplaceContent );
我的parseAndReplaceContent
函数调用 jQuery$( "#yourtextarea" ).val()
来访问和修改数据。