- 締切済み
JS テキストエリアを多色表示させるには？
JavaScriptでテキストエリアの数字だけ 赤字にすることはできますか？ 「できません」と即答しそうですが、 工夫すれば「できました」になります。（添付図参照） このように、テキストエリアを表示するには どんなコードでできますか？ <div class="container"> <textarea class="textArea" readonly></textarea> </div> <script> //テキストエリアに表示するデータ const data = [ ["== The Body Mass Index (BMI) RESULT =="], [" "], ["DANDY 身長 170cm, 体重 70Kg, BMI: 24.2, Normal"], ["CHUBBY 身長 160cm, 体重 70Kg, BMI: 27.3, OverWeight"], ["FATMAN 身長 150cm, 体重 70Kg, BMI: 31.1, Obese Class I"], ]; </script>
- retorofan
- お礼率86% (313/361)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- agehage
- ベストアンサー率22% (2551/11342)
補足を見ました ソースは回答にあるリンク先を参照してください
- agehage
- ベストアンサー率22% (2551/11342)
Javascriptで、となると面倒なだけで、CSSで unicode-range: U+0021-0040; で数字のみ指定してfont設定を行うとできると思う https://mitchyyy.com/font-number/ どうしてもJacascritptで、となると、そのCSSを動的に設定する
お礼
ご回答ありがとうございます。
補足
具体的には、 どんなコードで実現できるのでしょうか？ ご教示いただければと思います。
関連するQ&A
- div から テキストエリアに
divで表示させた文字を１０秒後に、javascriptで、テキストエリアに表示させる方法は、ありますでしょうか。もう、２週間くらい悩んでいます。cssでdivをテキストエリア風にするのではありません。お分かりになる方が、いたらどうか助けてください。 <div id="area"></div> → 表示文字 <TEXTAREA id="area2"></TEXTAREA> ------------------- １０秒後→ I 表示文字 I -------------------
- ベストアンサー
- JavaScript
- テキストエリアの設定
質問１ 以下のように設定しました。現在、横長のボックスの右下に４cm×４cm大の送信用テキストエリアが配置されていますが、両者を横一列に並べることはできるでしょうか。テキストエリアを横長ボックスの前に配置してもかまいません。 <html> <head> <title>MISC</title></head> <body bgcolor="#FFFF99"> <div align=center class="MsoNormal">－－－省略－－－－</div> <div style="background-color:#0ff;width:730px;height:200px;overflow:auto;"> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8">見出し</FONT> <h3><FONT COLOR="#0000ff">小見出し</FONT></h3> <FONT STYLE="font-size:5mm">テキスト</FONT></DIV> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> 質問２ あるいは以下の設定で、テキストエリア右側の空白部分にも見出し、小見出し、テキストを配置することができるでしょうか。 <div style="background-color:#0ff;width:950px;height:200px;overflow:auto;"> <form method="POST" action="mailto:***@*****"><textarea style="width:200px;height:200px;background-image:url(TX_11_11.JPG);">ご意見</textarea> <input type=submit value="送信"></form> <FONT STYLE="font-size:8mm"COLOR="#808000" SIZE="8">見出し</FONT> <h3><FONT COLOR="#0000ff">小見出し</FONT></h3> <FONT STYLE="font-size:5mm"SIZE="5">テキスト</FONT></DIV>
- ベストアンサー
- ホームページ作成ソフト
- オンマウスでテキストエリアにテキスト表示
現在、「猫」という文字にカーソルを合わせると text1のテキストエリアに 「ニャンと鳴く」と表示されるスクリプトを作成しました。 記述の一部ですが下に示します。 <form name="form1"> <TEXTAREA name="text1" rows="5" cols="40"></TEXTAREA> </form> <span onmouseover="txt_dsp('text1','ニャンと鳴く');"onmouseout="txt_dsp('text1', '');">猫</span><br> 教えていただきたいのは'ニャンと鳴く'という部分を msg.txtというテキストファイルに書かれた'ニャンと鳴く' で表示したいのですが、どのような記述にしたらよろしいでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- テキストエリア内の改行禁止
テキストエリア内での改行を禁止するタグを教えてください。 wrap="off" は試したのですが、うまくいきません。 <TEXTAREA rows="1" cols="20" name="list1" class="min2"></TEXTAREA> どうか、よろしくお願いします。 表示上も、出来れば改行しないようにしたいのですが、 出来なければ、結果のみ改行しない形でも構いません。 どうか、よろしくお願いします！
- ベストアンサー
- HTML
- テキストエリア内で改行するには。
次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ￥ｎという文字を使用するのでしょうか？ <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアをリアルタイムに表示したい
こんにちは。 下記のテキストエリア部分をフォーム内に入れると、リアルタイムに表示されません。リアルタイムに表示させようと思うとどうすればよいのでしょうか？ いろいろ試しては見るのですが、まだ勉強不足で思うように表現できませんでした。 わがままを言って申し訳ありませんが、どうかお力添えをお願い致します。<html> <head> <script language="javascript"> function myFunc() { dispArea.innerHTML = sourceArea.value; } var defaultStr = "<h1>hello</h1>\n<p>ここを書き換えると下の表示も変化します。</p><button onclick=\"alert('Hi')\">TEST</button>\n<hr>" </script> </head> <body onload="sourceArea.value=defaultStr;myFunc()"> <h2>HTML編集をリアルタイムに反映させる例</h2> <hr> <textarea name="form1" id="sourceArea" style="width:450px;height:200px;" onkeyup="myFunc()"> </textarea> <div id="dispArea" style="width:450px;height:200px;"> </div> </body> </html>
- ベストアンサー
- JavaScript
- テキストエリアの作成法
下記のような横一列に並んだ３つのテキストエリアを作成しました。Mozilla Firefoxではほぼ期待通り表示されましたが、インターネット・エクスプローラーでは全く表示されません。後者でも表示させるにはどうしたらよいでしょうか。 またテキストエリア内の文章に改行をつけるにはどうしたらよいでしょうか。 <form><p class=MsoNormal><span><TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly> 『テキスト』 </TEXTAREA> <TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly> 『テキスト』 </TEXTAREA> <TEXTAREA ROWS="13" COLS="70" NAME="textarea1"id=textarea1 style="HEIGHT: 540px; WIDTH: 300px; font-size: 9pt" readonly> 『テキスト』 </TEXTAREA></span></p></form>
- ベストアンサー
- Windows系OS
- AJAXのレスポンスをテキストエリアに表示
以下のようなスクリプト（chat.htmlと、write_log.php）において、chat.htmlからwrite_log.php に送ったリクエスト（xmlHttpRequestオブジェクト利用）に対するレスポンスを受信後に、 document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; としているのに、チャットのボディである、テキストエリアにレスポンスの文字列（ファイル(log.txt)の中身）.が表示されません。printした文字列がwrite_log.phpのページで表示されているだけなのです。テキストエリアに、サーバーサイドのPHPから返されるレスポンスの文字列を、テキストエリアに表示するにはどこが間違っているのでしょうか。 ご指導、どうぞよろしくお願いします。 【chat.html】 <!DOCTYPE html> <head><title>チャット</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="body"> <script type="text/javascript"> var xmlhttp; function httpHandler(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ // レスポンス受信後に呼び出される関数 // alert('test'); document.getElementById("disp_chat").innerHTML = xmlhttp.responseText; } } function onClicked(){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange = httpHandler; // コールバック関数 xmlhttp.open("GET", "write_log.php"); xmlhttp.send(null); // チャット音鳴動 var myAudio=document.getElementById("audio"); myAudio.play(); } function getDate(){ var date = new Date; var hours = date.getHours(); var minutes = date.getMinutes(); if(hours>=0 && hours<10){ hours = "0" + toString(hours); } if(minutes>=0 && minutes<10){ minutes = "0" + toString(minutes); } return (hours + ":" + minutes); } </script> <center> <div id="title">【チャット】</div> <div id="container"> <div id="disp"> <textarea id="disp_chat" class="disp"></textarea> </div> <div id="input"> <form name="form1" method="GET" action="write_log.php"> お名前：<input type="text" name="user" id="user" class="name"> メッセージ：<input type="text" name="input_chat" id="input_chat" class="input"><br><br> <input type="submit" id="submit" value="送信" onclick="onClicked()"> <!-- <input type="button" id="submit" value="送信" onclick="onClicked()">--> </form> </div> </div> </center> <audio id="audio" src="mjkchat.mp3">Your browser does not support the audio element.</audio> </body> </html> 【write_log.php】 <?php date_default_timezone_set("Japan"); $date = date('H:i:s'); $user = $_GET['user']; $chat = $_GET['input_chat']; $buf = $date.' '.$user.'：'.$chat."\n"; $filename = "./log.txt"; $fp = fopen($filename, 'a'); fwrite($fp, $buf); fclose($fp); $buf2 = file_get_contents($filename); print $buf2; //header("Location: chat.php"); ?>
- ベストアンサー
- JavaScript
- DOMによる、テキストエリアの内容の書き換え
以下コードを記述し、test.htmlで保存しました。 「ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる」 と言うことを想定し、作成してみました。 ところが、ボタンをクリックしても、テキストエリアが書き換わりません。 elm[0].Valueでは、駄目なのでしょうか。 ボタンをクリックしたとき、関数までは動いていることは確認できたのですが。 (alertで確認済み) ご教授お願いします。 ==========以下内容====== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テキストエリア書き直し</title> </head> <body> <h1>テスト</h1> <p>テキストエリアの書き換え</p> <script type="text/javascript"> <!-- function syutoku(){ var elm=document.getElementsByName('textarea1'); elm[0].Value="書き直し"; //alert(elm[0]); } --> </script> <hr> <p>テキストエリアを書き直します。</p> <form name="form1"> <p><input type="button" value="ボタン" onClick="syutoku()"></p> <p><textarea cols="40" rows="4" name="textarea1"> テキスト書き直しエリア</textarea></p> </form> <hr> </body> </html>
- ベストアンサー
- JavaScript
- ボタンをクリックするとテキストエリアに文字が表示される。
はじめまして 下記内容のJavaScriptを見つけたのですが これをどうにか違うものにしたいのです。 <html> <head> <TITLE>テキストエリアに複数項表示する</TITLE> <script language="JavaScript"><!-- function setChars() { str1="テキストエリアに"; str2="複数項にわたる文字を"; str3="表示します。"; document.myFORM.myTEXT.value=str1+"\n"+str2+"\n"+str3; } /--></script> </head> <body> <form name="myFORM"> <textarea name="myTEXT"rows="10"></textarea><br> <input type="button"value="複数行表示"onClick="setChars()"> </form> </body> </html> ------------------------------------------------ 例えば （月・火・水・木）とそれぞれのボタンがあるとします。 そのボタンを押すと、複数行テキストへ 月曜→○○○○ 火曜→○○○○ 水曜→○○○○ 木曜→○○○○ というように、表示させたいのです。 また、複数行テキストに入力された文字が消えず改行されて表示させたいのです。 自分でもいろいろと試してみたのですが、頭が悪く、全く思ったようにできません。 お忙しいところ大変申し訳ありませんが、 上記に記載した内容のスクリプトはありますでしょうか。 ご返答いただけると幸いです。
- ベストアンサー
- JavaScript
補足
リンク先は既読済みです。 色属性の設定は、いったいどこにあるのですか？