web-dev-qa-db-ja.com

ユーザーが複数の電子メールアドレス(招待用)を入力するための簡単なダイアログを提供するにはどうすればよいですか?

Webサイト上のアイテムが共有されている複数の電子メールアドレスを入力するようユーザーに求めるダイアログ(モーダル)を作成しています。ダイアログのサイズは約530x500ピクセルです。

現在、ユーザーにテキストフィールドにメールアドレスを入力してEnterキーを押すように求めています。 Enterキーを押すと、メールアドレスがテキストフィールドの下の縦に並んだボックスのボックスとして表示されます。各ボックスには削除リンクがあり、ユーザーは入力したメールアドレスを削除できます。これは基本的に、HotmailまたはYahooのWebメールのto/cc/bccテキスト入力で使用される通常の「タグ」ボックスの縦型バージョンのように見えます。

これを行うより良い方法はありますか?特に、一般的なコピーと貼り付けのシナリオ、またはサードパーティのアドレス帳サービスとの統合を考慮に入れます。

8
Jaffer

あなたが与えた説明は私には問題なく聞こえます-私が行う唯一の変更は、コード分離/ユーザーがEnterキーを押すと、それらを個別のアドレスに解析します。

これにより、コピー/貼り付けのシナリオが処理されます。「有効な」アドレスにはさまざまな種類があるため、アドレスを解析する際のキートラップはあまり敏感ではありません。

[例:メールアドレスにピリオド(。)が含まれているため、eコマースサイトでユーザー登録が拒否されました。私は自分のビジネスを別の場所に持っていきました。]

3
Bevan

クリップボード情報またはコンマ区切りの電子メールアドレスに貼り付けるテキストエリアを提供できます。 Enterを押すか、このtextareaに変更すると、コンテンツを解析し、既に行っているように、積み重ねられたボックスにメールアドレスをリストできます。これにより、ユーザーは不要なアドレスを削除したり、他のアドレスを追加したりできます

1
Matt

小さなjavascriptが好きなら、単純な「オブザーバー」テキストエリア(またはtexfield)を設定できます。

1)ユーザーがメールアドレスの入力を開始し、jsが各入力をチェックします。

2)スクリプトが潜在的なアドレス終了文字(スペース、コンマ、コロンなど)を認識すると、フィールドのコンテンツを解析します

3.a)有効な電子メールの場合、それを(表示可能な)リストに追加し、入力フィールドのコンテンツをクリアします

3.b)有効なメールアドレスではない場合、エラーフィードバックがどこかに表示されます

4)[1)からの繰り返し]

注1:作成された各リスト要素(単一の追加されたアドレス)には単純な削除アイコンが必要であることを考慮してください。

注2:隠しフィールドに正しいアドレスをそれぞれ保存できます(削除が最も簡単です)。

0
giuspe