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

2023/06/17

CSS Javascript

t f B! P L
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システムでの不具合が少なく、効率的なコードが書けるハズですね。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ