- ベストアンサー
入力フィールドの1文字を色付けしたい
<input type="text" name="hoge" value="10,000" > 上記のHTMLで表示される「10,000」のカンマだけ赤色で表示したいのです。HTML、JavaScripts、スタイルシートなどを使用してinputのvalueに設定されている内容の1部だけ色を変える事は可能でしょうか？
- ree111
- お礼率40% (10/25)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html><head><style>.red{color:red}</style></head> <body> 強引にspanに枠を付け、中にinputと更にspanを入れこみ<br> inputからキーが放されたと同時に","を赤色にして<br> 内側に放り込む！<br> 実用的かどうかは別？ <span style="border:2px inset;width:12em;" onClick="document.getElementById('a').focus()"> <input type="text" id="a" style="width:1px;background-color:#fff;color:#fff;border:none;" onKeyup="document.getElementById('b').innerHTML=this.value.replace(/,/g,'<span class=\'red\'>,</span>')"; > <span id="b"></span> </span> </body> </html>
その他の回答 (1)
読み込み時に初期値がセットされるように変更してみました！だめ？ <html> <head><style> .red{color:red;font:bold;} .inp{width:12em;border:2px inset;margin:0} .inpf{width:1px;background-color:#fff;color:#fff;border:none;} </style></head> <body> <span class="inp" onClick="$('a').focus()"> <input type="text" id="a0" value="1,000,000" class="inpf" onKeyup="move('b0',this.value)"> <span id="b0"></span> </span><br/> <span class="inp" onClick="$('b').focus()"> <input type="text" id="a1" value="1,234,567,890" class="inpf" onKeyup="move('b1',this.value)"> <span id="b1"></span> </span> <script> window.onload = function(){ move('b0',$V('a0'));move('b1',$V('a1')); } function move(i,v){ $(i).innerHTML=v.replace(/,/g,'<span class=\'red\'>,</span>');} function $(o){return document.getElementById(o);} function $V(o){return document.getElementById(o).value;} </script> </body> </html>
お礼
_pipi_様 回答ありがとうございます。 出来るんですね、こんな事。無理だろうなぁと思いながら 投稿してみたら、回答があったのでびっくりです。 本当にありがとうございました。 見た目をちょっと変えて見ました。 <html><head><style>.red{color:red}</style></head> <body> <span style="border:1px; width:8em; border-style:solid; border-width:1px; border-color:#bbccff; text-align:left; " onClick="document.getElementById('a').focus()"> <input type="text" id="a" style="width:1px; background-color:#333; color:#333; border:none;" onKeyup="document.getElementById('b').innerHTML=this.value.replace(/,/g,'<span class=\'red\'>,</span>')"; > <span id="b"></span> </span> </body> </html>