テキストボックスに文字飾り表示（２の３乗）が出来ない

2023/08/10 11:50

このQ&Aのポイント

JavaScriptを使用してテキストボックスに上付き、下付き文字を表示したいのですが上手く表示できません。
HTMLのコードが表示されてしまいます。
具体的な表示方法を教えてください。

ベストアンサー

テキストボックスに文字飾り表示（２の３乗）が出来ない。

2010/10/31 15:28

テキストボックスに文字飾り表示（２の３乗）が出来ない。　JavaScriptを使用しテキストボックスに上付き、下付き文字を表示したいのですが上手く表示しません。HTMLのコードが出てしまいます。下記簡単なコードを添付しますので、何方か正しい表示方法を教えてください。参考までにコード中(1)は正しく表示できず（テキストボックス中）、(2)は正しく表示します。（非テキストボックス） <HTML> <HEAD> <SCRIPT language="JavaScript"> function disp(){ var c=new Array("2"+"3".sup(),"1","2"); document.tm.a1.value=c[0]; // (1) document.write(c[0]); // (2) } </SCRIPT> </HEAD> <body> <FORM name="tm"> <INPUT type="button" value="" onClick="disp()"> <INPUT name="a1" type="text" size="20" width="10"> </FORM> </body> </HTML>

American123
お礼率33% (1/3)

JavaScript
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/11/01 10:26 回答No.3

補足実態はテキストボックスやテキストエリアじゃないですが、ワープロ感覚で、テキストを入力してもらって、HTMLとして取得するには、Webのオンラインエディターのライブラリーがいくつかあります。↓は結構有名です。（javascript+cssで実現）です。「ckEditor(旧 FckEditor)」 http://ckeditor.com/demo

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/11/01 09:59 回答No.2

　str.sup()メソッドは、stringオブジェクトのHTMLラッパーメソッドで、 HTML要素である<sup></sup>のタグをストリングに付加してHTMLを生成するもので、document.writeとか、element.innerHTMLでHTML要素として書き出さないと意味が無いです。　INPUT name="a1" type="text" size="20" width="10">のvalue(中身）は HTMLでなくて単なるテキストですから、HTMLのタグを書いてもそのまま、表示されるだけです。

質問者

お礼 2010/11/01 18:12

テキストボックスには単なるテキストだけしか表示できない事がわかりました。有難う御座いました。

yambejp
ベストアンサー率51% (3827/7415)

2010/11/01 09:43 回答No.1

そもそも文字入力どうやってやるつもりでしょう？テキストボックス内は特殊な文字表現はできないものと考えるべきです。どうしてもということであればdivなどで疑似的なテキストボックスをつくってやればいいでしょう。

関連するQ&A

htmlのテキストボックスに書かれた文字によって
htmlのテキストボックスに書かれた文字によって表示する文字を変えたいのですが、コードがいまいちどうやって書いていいかわからないのでコードを教えて下さい。よろしくお願いします。一応できなかったコード↓ <Form name="js"> <input type="text" name="txtb"> </Form> <script> <br> if(document.js.txtb.value="a"){document.write("a")} </script>
- ベストアンサー
- その他（インターネット・Webサービス）
ボタンを押したらテキストボックスの文字色をチェンジ
ボタンをクリックしたらテキストボックスに入っている文字色を黒から赤に変えたいんですがどのようにしたらいいでしょうか？一応、自分なりに作ってみたものです。エラーがでます。保存ファイルの拡張子は「ｈｔｍｌ」です。 ------------------------------------------------------- <html> <head> <script language="javascript"> function change(){ document.form1.text1.fgcolor="red"; } </script> </head> <body> <input type="text" value="文字色" name="text1"> <input type="button" value="押す" onClick="change()"> </body> </html> ----------------------------------------------------------
- 締切済み
- JavaScript
テキストボックスにスクロールする文字列を表示する。
テキストボックスにスクロールする文字列を表示する方法を知りました。^^ これはできたのですが、同じページで、「★メッセージ1」の他に「別の表示」をさせたいのですがどうしたらいいんでしょうか? 例えば、「★メッセージ2」。など　 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="scroll()"> <CENTER> <FORM name="myform"> <INPUT name="mytext" size="20"> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
フォームに表示される文字をセンタリングさせたい。
Javascriptの初心者です。宜しくお願いします。テキストエリアが2つあったとします。 1のテキストエリアにある値を入力してボタンを押すと、 2のテキストエリアに1で入力した値をそのまま表示させ、尚且つ表示された値をフォーム内でセンタリングさせたいのですがどうすればよいのかわかりません・・・。ご存知の方がいらっしゃいましたら教えて下さい。どうぞ宜しくお願い致します。 <html> <head> <script language="JavaScript">  </script> </head> <body> <form name="form1"> <input type="texterea" name="text1"> <input type="texterea" name="text2"> <input type="button" value="CLICK!" onClick="my1()"> </form> </body> </html>
- 締切済み
- JavaScript
テキストボックスの背景色について
<html> <body> <form name="form1"> <input type="text" value="よろしく" name="text1"> <script language="javascript"> document.form1.text1.style.background-color = "green"; </script> </form> </body> </html> これはテキストボックスの背景色をグリーンにするプログラムなんですがうまくいきません。どこが間違っているのか指摘してください。
- ベストアンサー
- JavaScript
HTMLでテキスト入力し表示させる
HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。見た目はできているようなのですが、文字が表示されない状態です。コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>
- 締切済み
- JavaScript
テキストボックスを無効にすると値が取得できない
javascriptでこのようにテキストボックスを無効にしてフォームを送信するとphp側でvalueの値が取得できないのですが、入力無効にすると valueは送られないんでしょうか？ <form> <input type="text" id="sample" name="sample" value="値" /> </form> スクリプト .document.getElementById('sample').disabled = true; valueにはphpで値をセットし、それをテキストボックスで編集できないようにして値を飛ばそうとしたのですがテキストボックスのvalueの値が来てないようです。自分なりに考えたんですが、送信する瞬間だけ（submitボタンが押された時）テキストボックスを有効に戻すようにコードを書いているのですがこれ以外で何かありますか？ ---このように対処--- <form onsubmit="return disb()"> <input type="text" name="sample" value="値" /> </form> スクリプト document.getElementById('sample').disabled = true; function disb(f){ f.sample.disabled = false; }
- 締切済み
- JavaScript
テキストフィールドへの値の表示
JavaScript初心者です。現在、言語習得のためのドリルをおこなっておりますが、２つのテキストフィールド間での値の受け渡しがうまくいきません。具体的には、上下２つのテキストフィールドがあり、上のフィールド（摂氏）に数値を入れボタンを押したタイミングで、その値を華氏に変換して下のフィールドに結果の値が表示される、またその逆もあり、というプログラムを作成したいのです。テキストフィールドのvalueに値を格納すればよいのかと思い、いろいろな箇所で値を格納してみたのですが、うまく動きません。アドバイスをよろしくお願いいたします。 <html> <head> <script type="text/javascript"> var cel; var fah; function cel_to_fah( ) { cel=document.getElementById("c").value; fah=(9 * cel / 5) + 32 //document.write(fah); document.input_fah.c.value=fah; //return fah; } function fah_to_cel(){ fah= document.getElementById("f").value; cel= 5 * (fah - 32) / 9; //document.write(cel); document.input_cel.f.value=cel; //return cel; } </script> </head> <body> <form id="input_fah" action="./hw06-3.html" > Celsius: <input type="text" id="c" size="20" > <input type="button" onclick="cel_to_fah()" value="To Fahrenheit"/><br/><br/> </form> /* <script language="JavaScript"> document.input_fah.c.value=cel_to_fah(); </script> */ <form id="input_cel" action="./hw06-3.html" > Fahrenheir: <input type="text" id="f" size="20"> <input type="button" onclick="fah_to_cel()" value="To Celsius" /><br/><br/> </form> /* <script language="JavaScript"> document.input_cel.f.value=fah_to_cel( ) </script> */ </body> </html>
- ベストアンサー
- JavaScript
テキストボックスの値同士を比較したい
urizakaと申します。さて、現在JSPでプログラムを組んでいるのですが、その際にHTMLフォームのテキストボックスとテキストボックスの値を比較して、同じ値だった場合にイベントが起きるようにしたいのですが、うまくいきません。具体的には以下のようなソースコードを書いたのですが… <HTML> <BODY> <FORM name="Del"> <input type="text" name="1"> <input type="text" name="2"> (中略） </FORM> <script language="JavaScript"> if (Del.1.value == Del.2.value){ document.writeln("同じ値です"); } (以下省略）　以下省略で省略されている部分に関しては問題なく動くのでこの場所以外でのエラーはかんがえられないのですが…すみませんが上記の方法についてご存知の方は教えていただけませんでしょうか？　宜しくお願いします。
- ベストアンサー
- JavaScript
JavaScript テキストボックスキーイベント
JavaScript テキストボックスキーイベントこんにちは。趣味でプログラミングをしている者です。タイマーを使って計算ドリルを作ったのですが、特定のキーコードで正解かどうか判定する関数を呼び出そうとしたのですが、テキストボックスにこたえを入力して、キーを押すたびに「キーン」というような音が鳴るのですが、その音は、どのような仕組みで鳴るのでしょうか？また、音を鳴らさないようにする方法がありましたら、教えていただけないでしょうかよろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.attachEvent("onkeypress", KotaeAwase); } function KotaeAwase() { if( event.keyCode == 13) { var key = 1; var kotae = parseInt( document.Form1.kotae.value ); var Result = document.Form1.result; if( kotae == key ) Result.value = "せいかいです!"; else Result.value = "ちがいます"; } } </script> </head> <body onLoad="init();"> <form name="Form1"> <input type="text" name="kotae" size="20"> <br><br> <input type="text" name="result" size="20"> <br> </form> </body> </html>
- ベストアンサー
- JavaScript