[CSS + Javascript] inputタグの任意の値を判定してCSSでセレクタ分岐させる方法

2023年6月17日

CSS Javascript

eyecatch とあるシステムを作っている時に、inputのvalue値を判別して、cssのselectorで切り分けを行う処理をすることがありました。 具体的に言うと、テキスト入力しているinputタグで任意の文字列が入力された場合に、文字色を変更するという仕様です。 ちょっと目からウロコのポイントがあったので、書き残しておくことにします。

redという文字が入力されたら、文字色を赤にする

とりあえず、下記のような簡単なコードを作ってみて検証。

index.html

<input type='text' name='memo' /> <link rel='stylesheet' href='style.css' />

style.css

input[name='memo']{ color:blue; padding:10px; outline:none; } input[name='memo'][value='red']{ color:red; } できない・・・

htmlタグに直接value属性を書くとselector判定される

index.htmlを次のように書き換えてみる。 <input type='text' name='memo' value='red'/> <link rel='stylesheet' href='style.css' /> value属性を追加して、直接"red"文字列を入れてみました。 色は変わりましたが、文字を変更しても赤色のままです。 ここから想定できることは、value属性はhtmlに書かれたモノしか反映されていないという事です。

javascriptで解決

index.htmlに次のコードを追加して、簡易なJavascriptで解決する方法を見つけました。

index.html

<input type='text' name='memo' /> <link rel='stylesheet' href='style.css' /> <script src='main.js'></script>

main.js

document.querySelector(`input[name='memo']`).addEventListener('input' , (e =>{ e.target.setAttribute('value' , e.target.value) }))

デモ

この仕様から分かること

inputタグは、個人情報を入力する非常にセキュアなタグであるため、インターネットブラウザのデバッグコンソールなど、簡易に表示できるソースコードで、value値が参照できないような仕様になっています。 なので、inputタグに何を入力しても、デバッグコンソールでは、value値は変更されていません。 そこで、javascriptで、value属性をsetAttribute関数を使って、上書きしてやることで、ちゃんとソースコードにvalue値が現れるようになります。 セキュリティの観点から、基本的にinputタグのvalue値は、見えないようにしておいたほうがいいので、これをデフォルトにしてもらわなくてもいいのですが、cssで連携できる仕様にはしてもらいたいな〜と少し思いました。

HTMLタグの属性値とプロパティ値について

今回の調査した内容は、HTMLタグの属性の値とプロパティの値という点を理解していれば、難なく理解することができます。 例えば、次のようなAタグを参考に考えると分かりやすいです。 <a class="test" href="index.html">トップページ</a>

属性値

htmlタグに直接記述されている値で、getAttribute,setAttributeで読み書きができます。 # html属性を読み取る const href = document.querySelector('a.test') > index.html # about.htmlに書き換え document.querySelector('a.test' , 'about.html')

プロパティ値

上記のAタグのhref属性を、Javascriptで次のように値を取得してみると、次のような結果が返ってきます。 const href = document.querySelector('a.test').href console.log(href) > http://example.com/index.html これは、相対パスで書かれているhref属性が、urlパスで返ってきているという状態です。 httpから始まるurlで記載されているhref属性であれば、そのままの値が返ってくるので気が付きにくいのですが、自サイトでの相対パスで確認すると分かりやすいです。 このプロパティ値の特性は、他の属性値でも色々な違いがある場合があって、今回のvallue属性もそれに当たるというワケでした。 属性値とプロパティ値をちゃんと、理解して処理することができれば、webシステムでの不具合が少なく、効率的なコードが書けるハズですね。