TopJavaScript > 2012年1月
2012年1月20日

リターン(Enterキー)でフォームを送信しない方法

January 20,2012 1:55 AM
Tag:[, ]
Permalink

フォームのテキスト入力中にうっかりリターン(Enterキー)を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。

ということで、リターン(Enterキー)でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。

1.リターンでフォームが送信される原因

次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="submit" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="submit">送信</button>
</form>

type属性が「password」の場合も同様です。

2.送信ボタンを書き換える

送信ボタンを赤色のように、「type="button"」のinput要素またはbutton要素に書き換えることで、リターンによる送信を回避できます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" onclick="submit();" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="button" onclick="submit();">送信</button>
</form>

つまり、type属性が「submit」のinput要素またはbutton要素を作らない、ということがポイントです。

onclick属性の部分をjQueryで書き直すと、次のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=button]").click(function(){
    $("form").submit();
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" value="送信" />
</form>

なお、フォームにテキストフィールドが1つしかない場合は次の対処も併せて行う必要があります。

3.テキストフィールドがフォームに1つしかない場合

次のように、テキストフィールド(またはパスワードフィールド)がフォームに1つしかない場合、2項の対処を行っても送信されてしまいます(下)。textareaや他のtype属性のinput要素が複数存在しても挙動は同じです。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="button" onclick="submit();" value="送信" />
</form>

このような場合はダミーのテキストフィールドのinput要素を用意して、テキストフィールドが2つある状態にします。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="dummy" style="display:none;">
  <input type="button" onclick="submit();" value="送信" />
</form>

4.押されたキーを判定して抑止する

3項まではtype属性が「submit」の要素を排除することで実現しましたが、ここでは押されたキーによって判定する方法を紹介します。

押されたキー(リターンは「13」)で判定するには次のようにします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=text]").keypress(function(ev) {
    if ((ev.which && ev.which === 13) ||
        (ev.keyCode && ev.keyCode === 13)) {
      return false;
    } else {
      return true;
    }
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" onkeypress="return entsub()" />
  <input type="submit" value="送信" />
</form>

この方法であればtype属性がsubmitのinput要素を使えるようです。

5.参考サイト

参考サイトは以下です。ありがとうございました。

Comments [0] | Trackbacks [0]
2012年1月18日

onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法

January 18,2012 2:22 AM
Tag:[, ]
Permalink

JavaScriptで、onsubmitの戻り値をfalseにしてフォームのsubmitを中断させる(実行しない)方法を紹介します。

1.onsubmitイベントとは

onsubmitイベントは、フォームの送信ボタン(type属性がsubmitのボタン)がクリックされた時に発生するイベントです。

<form method="post" action="foo.cgi" onsubmit="foo();">
  <input type="text" value="" />
  <input type="submit" value="送信" />
</form>

2.submitを中断する(=フォームを送信しない)方法

onsubmitイベントを使ってsubmitを中断するケースとして、送信時にJavaScriptでフォームのチェックをして、フォームデータに未入力の項目がある場合、「return false;」で送信を中止するというパターンがあると思いますが、中止したはずのに送信が実行されてしまうということがあります。

次のソースコードはその例で、未入力の項目がある場合に「return false」を行ってますが、送信は中断されません。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

原因は、赤色で示したform要素のonsubmit属性の記述が誤っているためです。

送信を中止するためには、onsubmit属性で起動した関数の返却値(false)をさらに返却する必要があります。つまり、

onsubmit="関数名"

ではなく、

onsubmit="return 関数名"

としなければなりません。

また、常に送信を中止したい場合は、

onsubmit="関数名; return false;"

と書けばよいでしょう。

先程のサンプルでは、次の青色部分のように修正すれば送信を中止します。

<script type="text/javascript">
function check() {
    for(i = 0; i < document.foo.length; i++) {
        if (document.foo.elements[i].type == "text") {
            if (document.foo.elements[i].value == '') {
                 alert("未入力の項目があります。");
                 return false;
            }
        }
    }
}
</script>
<form name="foo" action="foo.cgi" onsubmit="return check();">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

「true」はonsubmitイベントのデフォルト返却値なので、OKの場合に「return true;」を明示的に記述する必要はないと思います。

3.jQueryでの記述

jQueryで記述する場合は、次のようになるみたいです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#foo').submit(function(){
        var flag = 0;
 
        // フォームチェック
        $(this).find('input[type=text]').each(function(){
            if ($(this).val() == '') {
 
                // NGの場合
                flag = 1;
                return false; // break
            }
        });
        if (flag) {
            return false; // return
        }
    });
});
</script>
<form id="foo" action="foo.cgi">
  <input type="text" id="a" value="" />
  <input type="text" id="b" value="" />
  <input type="submit" value="送信" />
</form>

青色で示した、submit()ブロック内で「return false;」をすればフォームの送信を中止するようです。

each()ブロック内の赤色で示した「return false;」は、each()のループを脱出しているだけなので、間違えないように注意しましょう。

Comments [0] | Trackbacks [0]
2012年1月12日

JavaScriptで現在時刻や今日の日付を取得・表示する

January 12,2012 1:55 AM
Tag:[]
Permalink

JavaScriptで今日の日付や現在時刻を取得・表示する方法です。

毎回同じものを作っているような気がするのと、JavaScriptのビギナーの方むけの情報という意味で、このエントリーで動作サンプルを掲載しておきます。

1.現在日時を取得するサンプル

現在日時を取得するサンプルを以下に掲載します。このサンプルをウェブページに丸ごとコピー&ペーストすれば、サンプル下にある「出力結果例」の表示になると思います。

<script type="text/javascript">
var get_current_timestamp = function() {
    var weeks = new Array('日', '月', '火', '水', '木', '金', '土');
    var d = new Date();
 
    // 年月日・曜日・時分秒の取得
    var month  = d.getMonth() + 1;
    var day    = d.getDate();
    var week   = weeks[ d.getDay() ];
    var hour   = d.getHours();
    var minute = d.getMinutes();
    var second = d.getSeconds();
 
    // 1桁を2桁に変換する
    if (month < 10) {month = "0" + month;}
    if (day < 10) {day = "0" + day;}
    if (hour < 10) {hour = "0" + hour;}
    if (minute < 10) {minute = "0" + minute;}
    if (second < 10) {second = "0" + second;}
 
    // 整形して返却
    return d.getFullYear()  + "/" + month + "/" + day + "(" + week + ") " + hour + ":" + minute + ":" + second;
}
 
// 現在の日付・時刻を表示する
document.write(get_current_timestamp());
</script>

出力結果例

2012/01/12(木) 00:03:03

青色部分は現在日時の取得処理を関数にまとめたもので、その下の行にある「document.write( ... );」は、その関数を呼び出して動作を確認するためのものです。

2.別の関数から現在時刻を取得する

別の関数から現在時刻を取得したい場合、たとえばfoo()という関数から取得するには、赤色部分のように記述してください。青色は、1項のサンプルの青色部分が相当します。

<script type="text/javascript">
var get_current_timestamp = function() {
  // 中略
}
function foo() {
    var current = get_current_timestamp();
    // 変数currentを使った処理を記述
}
</script>

3.出力フォーマットを変更する

出力フォーマットを変更するには次の部分を書き換えてください。

return d.getFullYear() + "/" + month + "/" + day + "(" + week + ") " + hour + ":" + minute + ":" + second;

例えば「xxxx年xx月xx日 xx時xx分」にするには、次のように書き換えます。

return d.getFullYear() + "年" + month + "月" + day + "日 " + hour + "時" + minute + "分";

4.月日時分秒を1桁で出力する

月日時分秒の「1」~「9」を1桁で出力したい場合は、次の部分をまるっと削除してください。

// 1桁を2桁に変換する
if (month &lt; 10) {month = "0" + month;}
if (day &lt; 10) {day = "0" + day;}
if (hour &lt; 10) {hour = "0" + hour;}
if (minute &lt; 10) {minute = "0" + minute;}
if (second &lt; 10) {second = "0" + second;}

5.注意事項

get_current_timestamp()は関数リテラルによる定義(var xx = function(){ ... }という形式)のため、関数定義の前にdocument.write()などの処理を記述すると正常に動作しません。

<script type="text/javascript">
document.write(get_current_timestamp()); // これはエラー
var get_current_timestamp = function() {
  // 中略
}
</script>

要するに1項のサンプルや2項のように、get_current_timestamp()の定義の後方に、get_current_timestamp()を呼び出す処理を記述してください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3