/* Change BackgroundColor of TextBox by TextBox.value */ /* Change TextColor by BackgroundColor */ function changeColor(){ colorCode1=document.getElementById("TextBox").value; document.getElementById("TextBox").style.backgroundColor=colorCode1; var rgb = {red: 0, green: 0, blue: 0}; rgb.red = parseInt(colorCode1.substring(1, 2), 16); rgb.green = parseInt(colorCode1.substring(3, 4), 16); rgb.blue = parseInt(colorCode1.substring(5, 6), 16); var brightness = Math.max(rgb.red, rgb.green, rgb.blue) / 255; if(brightness >= 0.05){var textcolor = "#000000";}else{textcolor = "#ffffff";} if(colorCode1.length<6){textcolor = "#ff0000";} document.getElementById("TextBox").style.color=textcolor; }

テキストBOXの背景色と文字色を変えるJavascript


アイキャット画像は、ちゅいさんです。

 

 

 

テキストBOXに入力されたカラーコードに、その背景を変更します。そして、文字が見えなくならない様にテキスト色も変更します。

 

今回は、以下の様なことをしています。

① テキストBOXに入力されたコードに背景を変更

② このカラーの明度を計算し、0.05を判定基準に文字色を決定

③ タイプ入力の際に文字が見えなくなるので、文字数が少ない時の文字色を指定

<html部>

 

<Script部>

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です