Webサイト上のアイテムが共有されている複数の電子メールアドレスを入力するようユーザーに求めるダイアログ(モーダル)を作成しています。ダイアログのサイズは約530x500ピクセルです。
現在、ユーザーにテキストフィールドにメールアドレスを入力してEnterキーを押すように求めています。 Enterキーを押すと、メールアドレスがテキストフィールドの下の縦に並んだボックスのボックスとして表示されます。各ボックスには削除リンクがあり、ユーザーは入力したメールアドレスを削除できます。これは基本的に、HotmailまたはYahooのWebメールのto/cc/bccテキスト入力で使用される通常の「タグ」ボックスの縦型バージョンのように見えます。
これを行うより良い方法はありますか?特に、一般的なコピーと貼り付けのシナリオ、またはサードパーティのアドレス帳サービスとの統合を考慮に入れます。
あなたが与えた説明は私には問題なく聞こえます-私が行う唯一の変更は、コード分離/ユーザーがEnterキーを押すと、それらを個別のアドレスに解析します。
これにより、コピー/貼り付けのシナリオが処理されます。「有効な」アドレスにはさまざまな種類があるため、アドレスを解析する際のキートラップはあまり敏感ではありません。
[例:メールアドレスにピリオド(。)が含まれているため、eコマースサイトでユーザー登録が拒否されました。私は自分のビジネスを別の場所に持っていきました。]
クリップボード情報またはコンマ区切りの電子メールアドレスに貼り付けるテキストエリアを提供できます。 Enterを押すか、このtextareaに変更すると、コンテンツを解析し、既に行っているように、積み重ねられたボックスにメールアドレスをリストできます。これにより、ユーザーは不要なアドレスを削除したり、他のアドレスを追加したりできます
小さなjavascriptが好きなら、単純な「オブザーバー」テキストエリア(またはtexfield)を設定できます。
1)ユーザーがメールアドレスの入力を開始し、jsが各入力をチェックします。
2)スクリプトが潜在的なアドレス終了文字(スペース、コンマ、コロンなど)を認識すると、フィールドのコンテンツを解析します
3.a)有効な電子メールの場合、それを(表示可能な)リストに追加し、入力フィールドのコンテンツをクリアします
3.b)有効なメールアドレスではない場合、エラーフィードバックがどこかに表示されます
4)[1)からの繰り返し]
注1:作成された各リスト要素(単一の追加されたアドレス)には単純な削除アイコンが必要であることを考慮してください。
注2:隠しフィールドに正しいアドレスをそれぞれ保存できます(削除が最も簡単です)。