テキストボックスでWebブラウザーの自動補完(オートコンプリート) ポップアップを無効にする

テキストボックスでWebブラウザの自動補完ポップアップ(オートコンプリート)を無効にするコードを紹介します。

概要

Microsoft Edge や Google Chrome ではテキストボックスにフォーカスが入ると、以前に入力された項目が自動補完(オートコンプリート)の候補としてポップアップのドロップダウンリストで表示されます。同じ値を頻繁に入力する場合はこの機能は便利ですが、毎回異なる値を入力するフォームではポップアップの表示により操作性が悪くなってしまいます。この記事ではテキストボックスにフォーカスが入った際にWebブラウザの自動補完ポップアップを無効にするコードを紹介します。

動作、現象の確認

デフォルトの自動補完が表示される動作を確認します。ASP.NETアプリケーションを作成します。(フォームタグのあるHTMLファイルでも構いません)

下記のUIを作成します。テキストボックスを2つ、ボタンを1つ配置します。

aspxファイルのコードは下記になります。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteCancel.aspx.cs" Inherits="TextBoxDemo.AutoCompleteCancel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
          <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>

HTMLの場合は下記のコードになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <form method="post" action="AutoCompleteCancel.html">
    <input type="text" id="text1" name="input01" /><br/>
    <input type="text" id="text2" name="input02" /><br/>
    <input type="submit" value="Exec" />
  </form>
</body>
</html>

プロジェクトを実行します。Webブラウザが起動し、下図の画面が表示されます。

テキストボックスに「ペンギン」「らくだ」を入力し[Button]をクリックします。

一度Webブラウザを閉じるなどし、再度ページを表示します。テキストボックスをクリックしてフォーカスを与えると先ほど入力した値がポップアップで表示されます。ポップアップされた項目をクリックします。

クリックすると、ポップアップで表示された候補がテキストボックスの値に設定されます。下のテキストボックスも同様に先ほど入力された値がポップアップで表示されます。

一度入力した文字列であれば、簡単に入力できる機能ですが、毎回別の文字列を入力する用途では使いづらいです。

対処方法

フォーム全体の入力フィールドに対して補完をしない動作にする場合

フォームのすべての入力フィールドで補完をしない場合は、Formタグの autocomplete 属性に "off" を指定すると補完をしない動作になります。
先のaspxファイルを下記に変更します。formタグにautocomplete="off" を記述します。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteCancel.aspx.cs" Inherits="TextBoxDemo.AutoCompleteCancel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server" autocomplete="off">
        <div>
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
          <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>

HTMLの場合は下記のコードになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <form method="post" action="AutoCompleteCancel.html" autocomplete="off">>
    <input type="text" id="text1" name="input01" /><br/>
    <input type="text" id="text2" name="input02" /><br/>
    <input type="submit" value="Exec" />
  </form>
</body>
</html>

実行結果

プロジェクトを実行します。下図のウィンドウが表示されます。

テキストボックスをクリックしてフォーカスを与えても、入力候補のポップアップは表示されません。

フォーム特定の入力フィールドに対して補完をしない動作にする場合

フォームの特定の入力フィールドで補完をしない場合は、フィールドのinputタグの autocomplete 属性に "off" を指定すると補完をしない動作になります。
先のaspxファイルを下記に変更します。asp:TextBoxタグにautocomplete="off" を記述します。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoCompleteCancel.aspx.cs" Inherits="TextBoxDemo.AutoCompleteCancel" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
          <asp:TextBox ID="TextBox2" runat="server" autocomplete="off"></asp:TextBox><br />
          <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>

HTMLの場合は下記のコードになります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <form method="post" action="AutoCompleteCancel.html" >
    <input type="text" id="text1" name="input01" /><br/>
    <input type="text" id="text2" name="input02" autocomplete="off" /><br/>
    <input type="submit" value="Exec" />
  </form>
</body>
</html>