VBScript:フォームのコントロールで[Enter]キーが押されてもSubmit(送信)されないようにする方法

VBScript:フォームのコントロールで[Enter]キーが押されてもSubmit(送信)されないようにする方法

Webのフォームに配置したテキストボックスなどで、[Enter]キーを押すとSubmitされてしまう場合があります。

それを防ぐために[Enter]キーが押されても無効にしてSubmitされないようにする方法を覚書。

本来はJavaScriptでやるのが一番簡単でいいんだけど、どうしてもVBScriptでやる必要があったので覚書しておきます。

スポンサーリンク

[Enter]キーが押されてもSubmitさせない方法のサンプルプログラム

この記事では、[Enter]キーを無効にするサンプルプログラムになっていますが、キーコードを変えれば他のキーに応用することもできます。

[Enter]キーに限ったサンプルプログラムではありません。

サンプルコードと簡単な説明を以下に記載します。

まず、キーコード(何のキーが押されたかを示す数値)を引数として受け取り、キーコードが[Enter]キーを示す数値([Enter]キーは、13)だったらSubmit(送信)をキャンセルする関数を作成する。

関数のコードは以下のとおり。

<script type="text/vbscript" >
function EnterCancel(keycode)
if keycode = 13 then 
window.event.returnValue = false
end if
end function
</script>

作成した関数は、HTMLの<head> ~ </head>の間に記述してください。

次にフォームの各コントロールの"OnkeyPress"イベント発生時に上記で作成した関数を呼び出す記述を追加します。

関数を呼び出す際に引数としてキーコードを渡しますが、キーコードの取得は、"window.event.keyCode"で取得できるのでプログラムは以下のようになります。(テキストボックスの例)

<input name="Text1" type="text" onkeypress="VBScript:EnterCancel(window.event.keyCode)" />

サンプルとしてHTMLソースを記述すると以下のようになります。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/vbscript" >
function EnterCancel(keycode)
if keycode = 13 then 
window.event.returnValue = false
end if
end function
</script>
</head>
<body>
<form method="post" action="result.asp">
<input name="Text1" type="text" onkeypress="VBScript:EnterCancel(window.event.keyCode)" /><br />
<input name="Submit1" type="submit" value="送信" />
</form>
</body>
</html>

作成した関数のキーコードの値を変更すれば、[Enter]キー以外のキーが押された場合についても処理できます。

押されたキーのコードを取得するには、"window.event.keyCode"を使って、Submitをキャンセルするには、"window.event.returnValue = false"を使います。

これを組み合わせればよいだけです。

JavaScriptの場合

以下の記事で同じ処理をJavaScriptで記述する例を書きましたが、いちいち各コントロールに関数を呼び出す記述をしなくてもよいのでJavaScriptで書いたほうが簡単です。

JavaScript:フォームのコントロールで[Enter]キーが押されてもSubmit(送信)されないようにする方法
webページに設置したフォームのコントロールででキーを押してもSubmit(送信ボタン)されないようにするためのJavaScriptサンプルプログラムを覚書。

JavaScriptの例みたいに、ページのロード時に各コントロールに関数の呼び出しを設定しようとしましたがエラーが出てどうしても設定できなかったので、各コントロールに直接記述するようにしました。

もしかするとやり方が悪いだけかも...

コメント

タイトルとURLをコピーしました