小池啓仁 ヒロヒト応援ブログ By はてな

小池啓仁（コイケヒロヒト）の動画など。

小池啓仁 ヒロヒト応援ブログ By はてな

キャンセルイベント（returnValueとpreventDefault）

WEB

通常、HTMLのform要素中にテキストボックスが一つの時は、Enterキーで自動的にsubmitイベントが発生します。
googleやyahooが検索文字を入力後、submitボタンクリックなしに、Enterキーだけで検索できるヤツです。


これは、結構便利なのですが、実は、submitしたくない場合も、よくあるのです。
以下は、テキストボックス入力後、Enterキーを押してもsubmitイベントを発生しないサンプルです。

<html>
<body>
<script type="text/javascript">

function cancelEnter(evt) {
    if (evt.keyCode == 13) { // 13はEnterキーの値
        if (evt.preventDefault) {
            evt.preventDefault();
        }
        else {
            evt.returnValue = false;
        }
    }
}

</script>
<form action="test02.html">
<!-- input type="text" name="text1" -->
<input type="text" name="text1" onkeypress="cancelEnter(event || window.event);">
</form>
</body>
</html>

Firefox系は、preventDefaultメソッドで発生中のイベントを妨げ（prevent）。
IEは、returnValueプロパティにfalseをセットすると、発生中のイベント処理がfalseを返（return Value）し終了する。


参考：