ズンドコブームにのって、HTML5とCSS3で挑戦しました。
入力欄に「ズンズンズンズンドコ」というフレーズが入力されると「キ・ヨ・シ！」します。
See the Pen HTML5とCSS3でズンドコ by anchoor (@anchoor) on CodePen.
##せいいっぱいの実装
- input要素のpattern属性で入力値バリデーションする
- 入力値がvalidな場合、:valid疑似クラスを利用して「キ・ヨ・シ！」を出す
- input要素には::after疑似要素を使えないため、「キ・ヨ・シ！」用にspan要素を配置する
- 入力値がvalidな場合、入力欄より一回り大きいspanを上にかぶせて以降の入力を不可とする（美しくないしフォーカスがそのままだと入力できてしまう…
）