[HTML] テキストボックスの背景色を退避して元に戻す(beforeBackgroundColor)

Pocket

ここでは、テキストボックスの背景色を退避して元に戻すサンプルコードを掲載しています。ここでは、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>

スポンサーリンク


Pocket

Leave a Comment

Your email address will not be published. Required fields are marked *