プログラミング雑記

【JavaScript】編集したテキストボックスの色を変更する

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

はじめに

入力フォームなんかを作るときに、「ここは編集済み」ということを明示的に知らせたい時があります。特に、一回登録した情報を再編集するときは、もともと入力されていた項目と編集した項目の区別がつかなくて分かりにくかったりします。

そこで、簡単な方法で編集済みのテキストボックスに色をつける方法を紹介します。

実装方法

下記の通りです。

<body>
<input id="1">
<input id="2">
<input id="3">
<script>
//jQueryが必要
$('input').change(function () {
   $(this).css('background', '#ffdfdf');
});
</script>
</body>

これでinput要素が編集されると対象の要素の背景が淡い赤色に変更されます。

  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記