jQueryの(EFOにとって)余計な機能をぶった切る

jQueryの(EFOにとって)余計な機能をぶった切る

どうも、さむらいです。

当社ASPサービスのフォームアシストでは入力欄の状態をリアルタイムでチェックし、入力状態が正しいものでなければエラーアラートを表示する機能があります。

必須入力欄だった場合はわかりやすいようにカラーリングもつくんですよ。

そんな便利機能に真っ向から戦いを挑むあいつ

jQueryのプラグインにdPasswordっつーものがありまして、これはどういったものかというとiPhoneのパスワード入力時のように最後の1文字だけは入力文字を見せて、0.5秒程度経つとそれを●に変換する機能です。

image01

こうゆう感じ。

通常のtype=”password”の入力欄は最後の文字も入力するそばから●になるので、自分が入力した文字が本当に正しいかどうかわかりにくいんですね。まぁそうゆう意味ではdPasswordプラグインはユーザに優しい機能なんですが、これが当社サービスにとってはまさに天敵なのです。

dPasswordの仕組み

このプラグインがどう動くかというと

1.既存のパスワード入力欄(type=”password”)を非表示(display:none)にし、新たな入力欄を作成する(もうこの時点でFAの設定が…)

jQueryの(FAにとって)余計な機能をぶった切る (1)

jQueryの(FAにとって)余計な機能をぶった切る (2)

2.新しく作成した入力欄の内容を、1で隠した入力欄にコピーし、見えてる欄の文字を●にする。

jQueryの(FAにとって)余計な機能をぶった切る (3)

なーんてことをやっています。
文字にすると とっても簡単な処理なんですが、これがもうフォームアシストとは相性が悪いんですよ。それはもう。ほんとに。

フォームアシストは管理画面から設定した入力欄が途中で非表示になることは想定していないので、冒頭でも書いた「リアルタイムで状況をチェックし、カラーリングをする」という処理が、非表示にされた項目に対して行われるのです。

jQueryの(FAにとって)余計な機能をぶった切る (4)

なのでdPasswordで作成された項目は、本当はエラー状態なのにカラーリングが反映されず、あたかも正常に入力が完了しているように見えてしまうので、ユーザからすると全部正しく入力したのに、なぜかエラーが残っている!と勘違いされてしまうわけですね。

jQueryの(FAにとって)余計な機能をぶった切る (5)

どうやって解決するか

フォームアシストではカスタマイズによって既存の機能の書き換えを行ったり、クライアントページのイベントを発火したりすることができるようになっています。

今回のケースではカスタマイズによって、見えていない項目に適用されている色と同じ色を、見えている項目にも反映させる(詳細はすごく割愛する)ことによってユーザに見た目上 エラーが解除されていないようお知らせできるようにしました。

まとめ

ASPサービスはユーザのページの作りによっていろいろと考慮しなければならないことも多く、ユーザページに合わせたカスタマイズも必要になるケースが多々有ります。

最近ではjQueryを利用されているお客さんも非常に多い(というかほとんどそうな)ので、jQueryのプラグインに何があって、どんな機能でといった知識も必要になるケースが増えてきました。

jQueryを使うなとは言えませんが、ページの作り次第ではカスタマイズに時間がかかり、費用対効果が望めないことも覚えておいてくださいね。(・∀・)ニヤニヤ

コメント