HTML?JavaScript? INPUTタグ内の文字をハイライト

このQ&Aのポイント
  • formタグ中にあるInputタグ内の文字をカラフルにハイライトさせる方法について教えてください。
  • 現在試している方法ではsubmitでタグが送信されてしまい、イメージするようなハイライトになりません。
  • HTMLかJavaScriptを使って、Inputタグ内の文字をハイライトさせる方法を知りたいです。
回答を見る
  • ベストアンサー

HTML?JavaScript?  INPUTタグ内の文字をハイライト

HTML?JavaScript?  INPUTタグ内の文字をハイライトさせたい 下記画像のように、formタグ中にある、Inputタグ内の文字をそれぞれカラフルにハイライトさせたいのですが、その方法が分かりません。HTMLかJavaScriptを使えばできるのかも分かりません。 どのようにすれば良いかどなたか教えていただけないでしょうか?宜しくお願い致します。 なお、下記のようにやってはみたものの、submitでタグも送信してしまいますし、タグがそのまま表示されてしまい、イメージする様にはなりませんでした。 <form action="~"> <input value="<span style=background-color:#ffff00>Input</span> <span style=background-color:blue>文字</span> <span style=background-color: pink>ハイライト</span>"> <input type=submit> </form>

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

<input>とか<textarea>の中身をマークアップする事は出来ないと思います。 contenteditable="true"を指定した、疑似テキストボックスで代用して、 文字を入力させ、特定の文字を探して、分割、背景色属性付加、再結合、 して、確定したら、非表示にしておいた本来の<input>に挿入、というように 作れば、よいかと思いますが、用途が今ひとつわかりませんね、目的は 何なんでしょうか? <div contenteditable=true>ほほほ<span style="background-color:yellow">Input</span> <span style="background-color:blue">文字</span> <span style="background-color:pink">ハイライト</span> へへへへ</div>

yuix_99
質問者

補足

回答いただきありがとうございます。 Fifefoxのプラグインやマークアップツールを使いブラウザで検索すると、HPにある検索単語が全てマークアップされるのですがとても便利です。 こういったツールなしでもリファラから検索結果をマークアップしてやろうと思っています。 通常の文章のマークアップは出来たのですが、Formタグの中は出来ずに困っています。 ただ、当方、HTMLの知識があまりなく、正常にFormタグで動かすことが出来ませんでした・・・

関連するQ&A

  • JAVASCRIPTでINPUT

    HTMLとJAVASCRIPTとJSPを使ってシステム構築をしております。 --------------- <html> <head> <SCRIPT Language="JavaScript"> <!-- function send() { alert("<input type=text name=name2>"); } // --> </SCRIPT> </head> <body> <form onSubmit="send(); return false;"> <input type=text name=name1> <input type=submit> </form> </body> </html> --------------- 上記のコードでやりたいことは、 submitボタンが押されたときにJAVASCRIPTを呼び出し JAVASCRIPT上で文字を入力し次画面へ送信するような機能を作りたいと思っているのですが、本を見てもなかなか載っていません。 もしかしたらJAVASCRIPTだけではできないかもしれません。 JSPまたはPHPで出来る機能でも良いので教えてください。

  • HTMLのinputタグに入力された文字列の中にHTMLのタグが

    HTMLのinputタグに入力された文字列の中にHTMLのタグが 含まれたらjavascriptでalertを出すようにしたいのですが、 どのようにしたらよいかお分かりの方いましたら、 どうか教えてください。 お願いいたします。

  • HTMLのinputタグ数が変わる場合のjavascript処理

    パターンA ~HTML~ <input type='text' name='a[]'> <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンB ~HTML~ <input type='text' name='a[]'> ~JavaScript~ var n = document.form1.elements["a"][0].value ; ---(1) パターンAではエラーが出ないのですが、パターンBでは(1)のところでエラーになってしまいます。 【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。 どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。 できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか?

  • inputタグはformタグで必ず囲む必要がありますか?

    <input type="text">や< input type="button">などのinputタグは、入力欄に入力されたデータを他のファイルに送らずに同ファイル内で処理する場合も、必ず<form></form>で囲む必要があるのでしょうか? 例えば、<input type="text" id=”background_color”>に色(例:赤、青等)を入力し< input type="button" value=”変更” onClick=”change_background()”>ボタンを押すと、バックグラウンドの色が入力された色に変わるようなコードを書くとします。Javascript(change_background())の内容は同ファイルの<header></header>内に記述しますが、ここでは関係ないので割愛します。 この場合、 <body> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </body> で良いのでしょうか? それとも <body> <form> <input type="text" id=”background_color”> < input type="button" value=”変更” onClick=”change_background()”> </form> </body> とする必要が、ありますか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • javascriptについての質問です

    先ほどと同じ質問ですが黒、ディムグレイ、灰、黒灰、銀、ライト灰、白の順でひだり側から文字でなくて色だけを間隔なしで表示させたいのですがなかなかうまくいきませんどなたかお教えください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>文字の色を変える、</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- //#RRGGBB形式による色の設定 var myStr; <span style="border:thin solid red" ><span style="color:white;background-color:#000000">Black</span ><span style="color:white;background-color:#696969">Dimm gray</span ><span style="color:white;background-color:#808080">Gray</span ><span style="color:black;background-color:#A9A9A9">Dirk gray</span ><span style="color:black;background-color:#C0C0C0">Silver</span ><span style="color:black;background-color:#D3D3D3">Light gray</span ><span style="color:black;background-color:#FFFFFF">White</span ></span> document.write //--> </script> </body> </html>

  • テキストエリア送信の際の文字化けについて

    以下のように設定しました。英語の場合は良いのですが、日本語や中国語の文章を送信すると、着信文が文字化けします。文字化けを防ぐにはどうしたらよいでしょうか。 <FORM action="mailto:XXX@****" method="post" enctype="text/plain" name="Form"><TABLE bgcolor="pink" cellspacing="1" cellpadding="0"> <TR><TD bgcolor="#ffffff" width="151"><TEXTAREA rows="400" cols="50" name="coment" style=" width:200px;height:180px;background-image:url(TX_11_11.JPG);"></TEXTAREA></TD> </TR><TR><TD colspan="2" bgcolor="#ffffff"><INPUT type="submit" value="送信" style="color : black;background-color : #ff00ff;border-with:pink;border-style : solid ;border-color :pink ;border-width : 1px ;"><INPUT type="reset" name="取消" value="取消" style="color : black;background-color : #00ffff;border-with:pink;border-style : solid ;border-color : pink;border-width : 1px;"></TD> </TR></TABLE></form>

  • <input> タグについて

    HTML内で、複数の<input>タグを持つフォームを使ってデータを入力し、それをPHPプログラムに送るものを作っています。 ある<input>タグの入力が終わった後にリターンキーを押すと、まだ他にも入力したいのがあるのに、すぐにPHPプログラムに飛んで行ってしまいますが、これを、submit ボタンを押したときにだけ飛んでいくようにすることは可能でしょうか? もし可能なら、どのようにするのでしょうか? 詳しい方どうぞ教えてください。お願いいたします。

    • ベストアンサー
    • PHP
  • HTMLのinputタグ数が変わる場合のjavascript処理

    HTML上にinputタグが複数あって、その値をJavascriptで配列として受け取るコーディングをしています。 例えばこんな感じで・・・ 【サンプル1】 <form method="post" action="***.cgi" name="form1" onsubmit="return valueCheck(this);"> <input type="hidden" name="wData" value="aaa"> <input type="hidden" name="wData" value="bbb"> </form> function valueCheck(wForm) { document.write('wData='+wForm.wData[0].value); document.write('wData='+wForm.wData[1].value); } ただ、inputが1つしかない時もあるのですが、そのときの値が配列で受け取れません。 下記のように修正すると動くので、配列じゃないただの値だと判断されているようです。 【サンプル2】 <form method="post" action="***.cgi" name="form1" onsubmit="return valueCheck(this);"> <input type="hidden" name="wData" value="aaa"> </form> function valueCheck(wForm) { document.write('wData='+wForm.wData.value); } inputの値がいくつあるのかは都度変わるので、1つの時でも配列で処理したいのですが どのように記述すればいいのでしょうか。

  • 選択によってsubmitボタンの色を変える

    先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。 <html> <head> <script Language="JavaScript"> <!-- function set( n ) { document.myFORM.Submit.value = document.myFORM.elements[n].value; } // --> </script> </head> <body onLoad="set(0);"> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink"> </form> </body> </html>

  • INPUTタグ disabledでテキストの色を通常の黒に

    HTMLのテキストボックスで、コピーは可能で、入力不能の状態にしたい。 (計算式の答えをボタン入力で入れるため) そのため、INPUTタグでdisabledにした。 reasonlyだと、コピーが出来ないため。 ただ、disabledだと、文字が灰色になってしまいます。 それを防ごうと、styleオプションで、文字色をしようとしたがうまくいきません。(colorなどで) 方法を教えてください。 (javascriptしか、無理な場合は、ソースを教えてください)

    • ベストアンサー
    • HTML

専門家に質問してみよう