フォーム入力時に入力候補が出るのを防ぎたい。

前提・実現したいこと

フォームに正しい英文を入力すると続きの会話が表示されるという仕組みを作っているのですが、一度正しい英文を入力してしまうと次以降入力時に入力候補に正解が表示されてしまいます。半角入力では入力候補が出ないのですが、全角入力時にも入力候補が出ないようにしたいです。

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

エラーは特に出ていませんが、入力候補が出てしまいます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<script src="jquery-3.4.1.js"></script>
6<style type="text/css">
7
8dt{
9	float:left;
10}
11
12#a_2,#a_4,#a_6_1,#a_6_2{
13	visibility:hidden;
14}
15
16</style>
17</head>
18<body>
19<form id="form1" name = "form1" autocomplete="off">
20<p>1st month</p>
21<p>part 1-2</p>
22<p>空港にて</p>
23<dl>
24	<dt>A:<dt>
25	<dd id=a_1><input type="text" name="a_1" size="40" autocomplete="off"><input type="button" value="送信" onclick="a_1_click();"></dd>
26	<dt>B:<dt>
27	<dd id=a_2>It's over there.</dd>
28	<dt>A:<dt>
29	<dd id=a_3><input type="text" name="a_3" size="40"><input type="button" value="送信" onclick="a_3_click();"></dd>
30	<dt>B:<dt>
31	<dd id=a_4>From 10 a.m.</dd>
32	<dt>A:<dt>
33	<dd id=a_5><input type="text" name="a_5" size="40"><input type="button" value="送信" onclick="a_5_click();"></dd>
34	<dt>B:<dt>
35	<dd id=a_6_1>You'll need to speak with the ANA staff about that.</dd>
36	<dt>-:<dt>
37	<dd id=a_6_2>--end--</dd>
38</dl>
39</form>
40
41<script>
42function a_1_click()
43{
44	let con = document.form1.a_1.value;
45		console.log(con);
46	if(document.form1.a_1.value == "Could you tell me where the ANA counter is?")
47	{
48		let elem = document.getElementById("a_2");
49		elem.style.visibility = "visible";
50	}
51}
52
53function a_3_click()
54{
55	let con3 = document.form1.a_3.value;
56		console.log(con3);
57	if(document.form1.a_3.value == "From what time can I check in?")
58	{
59		let elem = document.getElementById("a_4");
60		elem.style.visibility = "visible";
61	}
62}
63
64function a_5_click()
65{
66	let con5 = document.form1.a_5.value;
67		console.log(con5);
68	if(document.form1.a_5.value == "I'd like to carry this bag on with me.")
69	{
70		let elem_1 = document.getElementById("a_6_1");
71		let elem_2 = document.getElementById("a_6_2");
72		elem_1.style.visibility = "visible";
73		elem_2.style.visibility = "visible";
74	}
75}
76</script>
77<script>
78　　　　$('form').attr('autocomplete', 'off');
79</script>
80</body>
81</html>

試したこと

form全体、もしくは各inputにautocomplete="off"を記述してみてもダメでした。
また、jquery.disableAutoFill　というのも使ってみたのですがダメでした。
$('form').attr('autocomplete', 'off');というのも試してみたのですがダメでした。

補足情報（FW/ツールのバージョンなど）

使用しているブラウザはChromeのバージョン: 80.0.3987.149（Official Build）（64 ビット）です。
Sublime Textを使ってコードを書いています。
MDNには

このような理由から、現代的なブラウザーの多くはログイン欄における autocomplete="off" に対応していません。

...とある通り、こればかりはブラウザ側で設定してもらうしか無いのでしょうか？
ブラウザ側で設定してもらうしか無いのでしたら、それはそれで諦めが付くのですが、何か方法があるようでしたらご教示いただけますようお願いします。

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

回答1件

ベストアンサー

要件次第ですが、inputを使わないという手はどうでしょうか。
div内をtextareaやinputみたいに編集可能エリアにする

投稿2020/03/28 06:31

m.ts10806

総合スコア80875

tmyk1979

2020/03/28 06:35

迅速な回答ありがとうございます。リンク先の内容を読んでみたのですが、もしかしたらコレで行けるかも知れません。試してみます。試してみた後にまた何かコメントさせていただくかも知れません。取り急ぎお礼まで。

tmyk1979

2020/03/28 06:37

すみません、早速試してみたのですが、input使用時と同様に入力候補に正解が表示されてしまいました。

m.ts10806

2020/03/28 06:53

おそらく参照されてた記事にもあるように、「 WCAG 2.1 の 1.3.5: Identify Input Purpose の規則を破ることになる」というところがネックな気がしますね。ブラウザよりもOS側の機能にもなると思いますし、入力情報記録だけでなく、サジェスチョンもあるので、完全対応は難しいと思います（たぶん過去質問にも出てたかな）

tmyk1979

2020/03/28 07:10

OS側の入力予測の設定で「入力履歴を使用する」欄のチェックをはずすと一応、正解が表示される事はなくなります。この英文入力は自分個人の勉強のために作っているものなので問題無いのですが、もし公開するようなツールとして同じようなものを作るとしたら、各自OS側で設定してもらうしか無さそうですね、回答を聞けたおかげで諦めがつきました。自分だけでは判断がつかなかったのでとても助かりました。ありがとうございます。

tmyk1979

2020/03/28 21:26

その後、入力候補に正解が出てしまう点については諦めて作り続けていたのですが、何度も問題を解いていると半角入力でも正解が出るようになってしまいました。このようなプログラムの制作には記入方式ではなく問題を選択肢から選ぶ方式に変えるなどする必要があるかも知れません。色々とありがとうございました。

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