iPhoneのSafariでメールアドレス(再入力)のテキストボックスが自動入力されてしまう。

###前提・実現したいこと

会員登録画面をHTML等で作成しました。
メールアドレスの入力欄は、再入力用も含めて２つ作ったのですが、
これをiPhoneのsafariで入力すると、再入力用のテキストボックスは自動で値が入ってしまいます。
つまり、再入力操作になりません。

###発生している問題・エラーメッセージ

iPhoneのSafariでの操作です。
①１つ目のメールアドレス入力欄に、メールアドレスを入力する。
このとき、候補の中から選んで入力する。
②すると、１つ目のメールアドレスが候補の文字列で埋まると同時に、
２つ目の再入力用のメールアドレス欄も同じ文字列で埋まってしまう。
再入力操作にならない。

※①で候補から文字列を選ぶのではなく、１文字１文字入力すると、２つ目の再入力用のメールアドレス欄は埋まりません。

###該当のソースコード

HTML
1<div class="field required">
2  <label for="email">メールアドレス</label>
3  <input type="text" maxlength="256" placeholder="email@example.com" id="email" name="email" value="">
4</div>
5<div class="field required">
6  <label for="confirm_email">メールアドレス(再入力)</label>
7  <input type="text" maxlength="256" placeholder="email@example.com" autocomplete="off" id="confirm_email" name="confirm_email" value="">        
8</div>

ご教授のほど宜しくお願いします。

行動規範の内容に同意します

回答1件

このとき、候補の中から選んで入力する。

②すると、１つ目のメールアドレスが候補の文字列で埋まると同時に、
２つ目の再入力用のメールアドレス欄も同じ文字列で埋まってしまう。

機械的に埋まるのであれば打ち間違えということは起きない以上、人間に再入力操作を強いる意味自体がないと思うのですが、どうしてもやらなければならないものなのでしょうか。

投稿2017/04/27 04:30

maisumakun

総合スコア145183

tkshp

2017/04/27 05:08

ご回答ありがとうございます。はい、１個目を打ち間違えた場合、それが２個目に自動的に入ってしまうので、人間に再入力操作を強いたいです。

maisumakun

2017/04/27 05:17 編集

リストとして出てくるものは、「以前に入力したもの」なので、「本人が同じパターンで何度も入力を間違えている」パターン以外では、打ち間違えた時点で自動補完のリストから消えると思います。それでもやりたいですか？

tkshp

2017/04/27 06:34 編集

ご回答ありがとうございます。 ①１つ目のメールアドレス入力欄に、リストから選んで入力する。 ②続いて、２つ目の再入力用メールアドレス入力欄にも、再びリストから選んで入力する。このような挙動になるのならばよいのですが、現状は、①を実行した所、同時に２つ目の再入力用メールアドレス欄にもそのリストの値が入ってしまうという動きになっていて、この動きはさせたくないのです。こうなってしまうと、２つ目に再入力用メールアドレス欄を設ける意味がなくなってしまいます。 ①②の操作の場合でも、結局は同じリストの値を入れることになるとは思うのですが、一応、２回入力操作を行うことになるので、そういう仕様にしたいのです。

maisumakun

2017/04/27 06:37

どうしてもやりたいなら、確認欄を「前半」@「後半」のように分割してしまいましょう。これなら自動入力もコピペも、おそらく通用しなくなります。ただし、コンバージョンは下がると思います。

tkshp

2017/04/27 07:10

ご回答ありがとうございます。なるほど、分割すればできるのですね。見た目を変えずに実現するのは不可能なんですね。

maisumakun

2017/04/27 07:13

やる方法はあるとは思いますが、個人的感覚としては上で述べたように「そこまでしてやらせる意味が理解できない」ので、簡単に止められる方法を提案したまでです。

行動規範の内容に同意します