ここでは、テキストボックスの背景色を退避して元に戻すサンプルコードを掲載しています。ここでは、beforeBackgroundColorプロパティという正にそのものなプロパティを使用しています。
スポンサーリンク
beforeBackgroundColorプロパティ
では、サンプルコードです。onfocusイベント(フォーカスがあたったときに発生)で背景色の退避と変更を行い、onblurイベント(フォーカスがはずれたときに発生)で退避した背景色をもとに戻しています。
<html>
<head>
<script language="JavaScript">
// onfocusイベント(フォーカスが当たったとき)
function inputTextOnFocus(text)
{
// 現在の背景色を退避
text.beforeBackgroundColor = text.style.backgroundColor;
// 背景色変更
text.style.backgroundColor = '#0000FF'; // ブルー
}
// onblurイベント(フォーカスが外れたとき)
function inputTextOnBlur(text)
{
// 退避した背景色を元に戻す
text.style.backgroundColor = text.beforeBackgroundColor;
}
</script>
</head>
<body>
<input type="text" value="2018/08/21" onfocus="inputTextOnFocus(this);" onblur="inputTextOnBlur(this);"/>
</body>
</html>