2019年12月7日(土)

入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく

• 0
• 0
• 3
• 4

Result

See the Pen Image Password Strength – #046 of #100Days100Projects by kachibito
(@kachibito) on CodePen.

パスワードの長さに応じて背景画像が鮮明になっていく、というUI

ぶっちゃけ現在の主流である、テキストと色で強度を明示するのが現状は最適解に思えますが1つの方法として、パスワードの強度に合わせて何かしらコンテンツを変化させる明示方法は悪くないように思えます

レイアウトやUI次第ではスマホでは明示テキストを見逃す可能性もありますというか実際どこかで体験した記憶がるので分かりやすく施工するに越したことは無いですよね

JSはバニラで書かれてます

javascript

const password = document.getElementById('password'); const background = document.getElementById('background'); password.addEventListener('input', (e) => { const input = e.ta...