blog/content/post/2009/08/02/2009-08-02-00001211.md

61 lines
3.8 KiB
Markdown

---
title: フォームの中のテキストボックスでエンターキーを押したときの挙動を変更する
author: kazu634
date: 2009-08-02
wordtwit_post_info:
- 'O:8:"stdClass":13:{s:6:"manual";b:0;s:11:"tweet_times";i:1;s:5:"delay";i:0;s:7:"enabled";i:1;s:10:"separation";s:2:"60";s:7:"version";s:3:"3.7";s:14:"tweet_template";b:0;s:6:"status";i:2;s:6:"result";a:0:{}s:13:"tweet_counter";i:2;s:13:"tweet_log_ids";a:1:{i:0;i:4743;}s:9:"hash_tags";a:0:{}s:8:"accounts";a:1:{i:0;s:7:"kazu634";}}'
categories:
- ajax
---
<div class="section">
<p>
<a href="http://d.hatena.ne.jp/sirocco634/20090726/1248617774" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/sirocco634/20090726/1248617774', '前回');" target="_blank">前回</a>に詰まったと書いたフォームのテキストボックスでエンターキーを押すと自分自身にデータを送信する件ですが、検索するとピンポイントで書いているページを発見しました!ラッキー
</p>
<blockquote title="JavaScript++かも日記" cite="http://jsgt.org/mt/archives/01/000439.html">
<p>
Formに書いた内容をAjax送信する時には、「Enterキー」で自動送信されてしまうのを避ける必要があります。
</p>
<p>
Ajaxでの送信は、submitボタンを使わずに、onclickやonkeyupなどへXMLHttpRequestのopen()やsend()を仕込んで、送信するわけですが、「Enterキー」を押してしまうと、ブラウザが気を利かせて、submitボタンを押されたのと同じ動作をしてしまうからです。
</p>
<p>
でも、当然、Ajaxでは、普通は、action属性は設定されていませんので、何もしてくれません。IEですと、Ajax送信はされずに、リロードされてしまいます。
</p>
<p>
てなわけで、たとえば、<br />
</p>
<p>
<cite><a href="http://jsgt.org/mt/archives/01/000439.html" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://jsgt.org/mt/archives/01/000439.html', 'JavaScript++かも日記: 【Ajax】FormでAjax送信する時のEnter送信');" target="_blank">JavaScript++かも日記: 【Ajax】FormでAjax送信する時のEnter送信</a></cite>
</p>
</blockquote>
<p>
というわけで、フォームタグの部分に「onsubmit=&#8221;return false&#8221;」を指定しました。
</p>
<h4>
「ajax」に関連する最近のエントリ
</h4>
<ul>
<li>
<a href="http://d.hatena.ne.jp/sirocco634/20090729/1248876263" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/sirocco634/20090729/1248876263', ' プレースホルダを用いる &#8211; 武蔵の日記');" target="_blank"> プレースホルダを用いる &#8211; 武蔵の日記</a>
</li>
<li>
<a href="http://d.hatena.ne.jp/sirocco634/20090726/1248617774" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/sirocco634/20090726/1248617774', ' Ajaxを使って非同期通信をしようとしたけどできずにはまった &#8211; 武蔵の日記');" target="_blank"> Ajaxを使って非同期通信をしようとしたけどできずにはまった &#8211; 武蔵の日記</a>
</li>
<li>
<a href="http://d.hatena.ne.jp/sirocco634/20090606/1244292509" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/sirocco634/20090606/1244292509', ' perlでcgiを作る &#8211; 武蔵の日記');" target="_blank"> perlでcgiを作る &#8211; 武蔵の日記</a>
</li>
<li>
<a href="http://d.hatena.ne.jp/sirocco634/20090604/1244121530" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/sirocco634/20090604/1244121530', ' ユーザーインターフェースについて &#8211; 武蔵の日記');" target="_blank"> ユーザーインターフェースについて &#8211; 武蔵の日記</a>
</li>
</ul>
</div>