ごきげんよう代行承ります。＜何 ごきげんよう。
とあるECサイトとWindowsタブレットとの相性が最悪でした。（突然）
というのも、テキストボックスがいちいちかな入力に切り替わるのです。
それだけならよくありますが、そのサイトは英数入力にしても1文字入力するごとにかな入力に戻るという極悪仕様。
メールアドレスや電話番号の入力なんかストレスたまりまくりでした。
令和やぞ、って令和4年にして初めてガチで思いました。
だってこの時代にこんな謎なUIが存在するんですよ？
HTML5でinput typeが大量に追加されたのは何だったのか。
（関係あるのっていうかHTML5は平成だろ）
使っているうちにこのサイト固有の事情がわかってきました。
1文字入力するごとに桁数などをチェックしてエラーメッセージを表示しているのです。
都度IMEが再設定される挙動はこの実装と無関係ではなさそうです。
昔のウェブフォームといえばバリデーションはもっぱらバックエンドでした。
送信ボタンを押したあと、入力エラーがあれば赤枠やメッセージを表示して再入力を促すという。
今はそのようなサイトは減り、送信ボタンを押す前にチェックするところが増えています。
その際、チェックするタイミングが問題となります。
技術的にはどのイベントハンドラを使うか、と言い換えられるでしょうか。
と言っても大きく分けて次の2パターンです。
- テキストボックスがフォーカスを失ったとき … onblur, onchange, etc.
- 1文字入力されたとき … onkeyup, oninput, etc.
通常は、というか凝ったことしようとしなければ1.で十分です。
一項目入力し終わって次の項目に行こうとしたときにチェックされます。
そしてエラーが表示されたら戻って訂正する、と。
実装によってはフォーカスが次の項目に移らず元の場所に戻る場合もあります。
ですがこの方法は、最後の項目を入力してから送信ボタンを押すまでの間はチェックが行われません。
最後に限らず、エラーを表示しても気づかず次に進んでしまうユーザーもいるかもしれません。
そこで、サービス充実のために利用されるのが2.です。
入力途中でもその内容に応じた情報を逐次表示します。
最も有名なのが検索エンジンのサジェストでしょうか。
しかしこちらも一長一短でして。
冒頭に挙げたサイトの桁数チェックなんか、入力し始めは不足しているに決まっているのにわざわざメッセージを出す必要があるのでしょうか。
その結果IMEの初期化なんていう副作用も生じているわけで。
真のユーザーフレンドリーとは何かと考えたときに、機械的に1文字目からチェックを始めるようなことをしてはいけないのです。
いや自分も開発側だから難しいのはわかるんですけどね？
キー入力が終わって1秒とか経過してから候補を表示する、というjQueryライブラリは使ったことがあります。
この待ち時間は熟練者のキーボード入力を想定したもので、一般消費者とかタブレット端末とかになるとまた変えないといけないでしょう。
ウェブサイト構築は多種多様な閲覧環境を想定しないといけないから大変です。
フロントエンドのリッチ化とか、ブラウザーごとのIMEの挙動は開発者にとってずっとついて回る問題かもしれません。
@ondamakudari
0 件のコメント: