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>

回答No.1

yyr446 · ベストアンサー

<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>

補足

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