Symfony2の入力フォームにautocomplete=”off”を設定する方法

仕事でEC-CUBE3をメインに触っているのだが、最近フォーム周りの実装でつまづいたので備忘録としてメモしておく。

Chromeのオートコンプリート機能による問題

今回の問題は入力フォームのオートコンプリート（自動補完）機能に関することだ。

EC-CUBE3はSilexというPHPフレームワークを採用しており、ベースはSymfonyで作られているのでフォームの定義はTypeクラスに書くことになっている。

入力フォームの定義ファイルを見てもらおう。

$builder
	->add('date', 'text', array(
	    'label' => '日付',
	    'required' => true
	));

日付の入力を求めるフォームパーツの定義なのだが、フロント側でDatePickerを実装しており実際は以下のようなフォームとなる。

しかし、Chromeのオートコンプリート機能がONになっていると、以下のようにDatePickerで表示したカレンダーが隠れてしまう。

この問題を解決する。

はじめに試したこと

単純に以下のようにautocomplete属性を追加してみた。

$builder
	->add('date', 'text', array(
	    'label' => '日付',
	    'required' => true,
	    'autocomplete' => 'off',
	));

すると以下のエラーが発生。

The option “autocomplete” does not exist.

どうやらautocomplete属性はTypeクラスで使えないようだ。

解決策

ビューとなるTwig側にattr属性として設定してみた。

{{ form_widget(form.date, {"attr": {"class":"datepicker", "autocomplete":"off"}}) }}

これで無事に解決！

どうやらTwig側ではある程度自由な設定がおこなえるようだ。