inputタグでsubmitをエンターキーで操作させないためには。

基礎的なことかもしれないが、初めてだったので、メモ。inputタグでsubmit...

基礎的なことかもしれないが、初めてだったので、メモ。
inputタグでsubmit属性を指定したときに、エンターキーをおしたらデータが送信されるので、
どうもユーザビリティ的に気になるところが多々あった。
例えば
色々入力項目があるときに、思わずエンターキーを押してしまった時にいきなり別のページに行ってしかもエラーでてんじゃん!って感じ。


それの解消方法は、
inputタグのtype属性を単純にbutton属性にして、onclickイベントでsubmit();を指定すること。

つまりコードで書くと、
<input type="button" value="送信" onclick="submit();" />

こうすることでエンターキーでのデータ送信を解除でき、実際に送信ボタンをクリックすることでデータ送信が可能という流れを作ることができる。


今更ながら、メモでした。

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。