61 lines
3.9 KiB
Markdown
61 lines
3.9 KiB
Markdown
|
---
|
||
|
|
title: フォームの中のテキストボックスでエンターキーを押したときの挙動を変更する
|
||
|
|
author: kazu634
|
||
|
|
date: 2009-08-02
|
||
|
|
url: /2009/08/02/_1312/
|
||
|
|
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=”return false”」を指定しました。
|
||
|
|
</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', ' プレースホルダを用いる – 武蔵の日記');" target="_blank"> プレースホルダを用いる – 武蔵の日記</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を使って非同期通信をしようとしたけどできずにはまった – 武蔵の日記');" target="_blank"> Ajaxを使って非同期通信をしようとしたけどできずにはまった – 武蔵の日記</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を作る – 武蔵の日記');" target="_blank"> perlでcgiを作る – 武蔵の日記</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', ' ユーザーインターフェースについて – 武蔵の日記');" target="_blank"> ユーザーインターフェースについて – 武蔵の日記</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|