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

Posted 2023-03-06

【中文标题】有没有办法在用户使用 javascript 和 css 键入时设置 textarea 内容的样式？

【英文标题】：Is there a way to style textarea content as the user types with javascript and css?

【发布时间】：2012-10-19 22:10:50

【问题描述】：

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

例如：

<textarea>abcdefghijklmnopqrstuvwxyz</textarea>

我可以使用 javascript 在屏幕上突出显示上述 textarea 字符串中的所有元音吗？但是还是只在表单提交的时候才发送字符串？

【参考方案1】：

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

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

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

【参考方案2】：

您可以查看其中一个问题以获得一些灵感。他们专门讨论了实时语法高亮，所以它不是您要问的，但可能足够接近，而且语法高亮似乎是一个更常见的问题，因此更容易找到一些现成的解决方案：

Textarea that can do syntax highlighting on the fly? Are there any JavaScript live syntax highlighters? https://***.com/questions/1505761/textarea-with-syntax-code-highlighting Live text color change in javascript

【参考方案3】：

给 textarea 一些 id 并将其 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
 );

【讨论】：

“键入时”功能不是难点，难点是突出显示文本区域的特定部分。

你找到了所有的元音，但它并没有像他想要的那样在文本区域中突出显示它们。

【参考方案4】：

如果准确且只回答您的问题： 没有办法做到这一点，但正如其他人所说，还有其他方法可以解决您的任务

【参考方案5】：

试试这个

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

【参考方案6】：

我使用以下代码：

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

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