とあるシステムを作っている時に、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システムでの不具合が少なく、効率的なコードが書けるハズですね。
