javascript - ユーザーがjavascriptとcssで入力するときにtextareaコンテンツのスタイルを設定する方法はありますか？

Question

ユーザーが入力するときにテキストエリアのコンテンツのスタイルを設定する方法があるかどうか知りたいです。

例えば：

<textarea>abcdefghijklmnopqrstuvwxyz</textarea>

javascriptを使用して、画面上の上記のtextarea文字列のすべての母音を強調表示できますか？しかし、それでもフォームが送信されたときにのみ文字列を送信しますか？

Answer 1

divとの代わりにwithcontentEditable属性を使用しtextareaて、そこで強調表示を行うことができます。

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

div投稿する必要がある場合は、フォームの非表示フィールドにこのコンテンツをコピーする必要があります。

Answer 2

textareaにいくつかを与え、そのイベントをjquery関数でidバインドします。このようなものonkeyup

$('#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 3

これを試して

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

Answer 4

あなたはいくつかのインスピレーションのためにそれらの質問の1つを見ることができます。彼らはライブシンタックスハイライトについて具体的に話しているので、それはあなたが求めているものではありませんが、おそらく十分に近いです、そしてシンタックスハイライトはより一般的な問題のようですので、いくつかの準備ができた解決策を見つけるのは簡単です：

• その場で構文の強調表示を行うことができるTextarea？
• JavaScriptのライブ構文ハイライターはありますか？
• https://stackoverflow.com/questions/1505761/textarea-with-syntax-code-highlighting
• JavaScriptでのライブテキストの色の変更

Answer 5

正確にビーイングし、あなたの質問だけに答える場合：それを行う方法はありませんが、他の人が言ったように、あなたのタスクを解決する他の方法があります

Answer 6

私は次のスニペットを使用します：

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

私parseAndReplaceContentの関数はjQueryを呼び出し$( "#yourtextarea" ).val()て、データにアクセスして変更します。