HTMLとjavascriptについて教えてください。というか、

ここを見れば載ってるよではなく、実際に書いてください。
ブラウザはIE6のみでよいです。デザインはシンプルでよいです。

1, テキスト入力をもつ簡単な<FORM>があります。
テキスト入力時、リターンキーを押してもsubmitされなくする記述を
教えてください。

2, 同様のフォームで、普通にクリックするとsubmitされるが、
ダブルクリックには反応しないボタンを作ってください。
意図としては、普通の<input type=submit>だと
うっかりダブルクリックしてしまうとリクエストが
多重に送信されてしまうようなので、これをなるべく防ぎたいです。
(完全に防げなくてよいです)

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2006/02/08 16:18:35
  • 終了:--

回答(6件)

id:ito-yu No.1

ito-yu回答回数323ベストアンサー獲得回数142006/02/08 16:42:04

<script type=”text/javascript”><!--

var sub=false;

//--></script>

<form action=”hoge.cgi” method=”post” onSubmit=”return sub;”>

<input type=”text” name=”a”>

<input type=”submit” value=”go” onClick=”this.disabled=true; sub=true; this.form.submit();”>

</form>


というのはどうでしょうか。IEでは大丈夫です。

ただし、FirefoxではEnterによるSubmitを防げません。

id:tebukuro

試してみました。

IE6@WinXPで、全く効果なしなんですが。。

次の方よろしくお願いします。

2006/02/08 16:55:03
id:ito-yu No.2

ito-yu回答回数323ベストアンサー獲得回数142006/02/08 17:05:01

ポイント19pt

本当に?

http://www.geocities.jp/ysk_ito_x/nosubmit.html

これでも?


え、まさかのJavascript OFF環境ですか?


なお、Windows XP+IE6 で確認済み。

id:tebukuro

もうちょっと確認してみました。

が一つなら、確かにsubmitされませんでした。ですが がもう一つあるんです。この場合リターンでsubmitされます。それからダブルクリックも効いてしまいます。もちろんJavascriptは有効になってます。

2006/02/08 17:13:31
id:ymch No.3

やちまう回答回数36ベストアンサー獲得回数52006/02/08 18:39:40

ポイント19pt

安直な案で申し訳ありませんが…単にFORMを2階建てにすれば良いだけでは?


<html>

<head>

<title>No Submit by EnterKey</title>


<script type=”text/javascript”><!--

function copyform() {

document.F2.text1.value=document.F1.text1.value;

document.F2.text2.value=document.F1.text2.value;

}

//--></script>


</head>


<body>


<!-- こちらは入力専用フォーム(Submitできません) -->

<form name=”F1” onSubmit=”return false;”>

<input type=”text” name=”text1”>

<input type=”text” name=”text2”>

<input type=”button” value=”送信” onClick=”copyform();this.disabled=true;document.F2.submit();”>

</form>


<!-- こちらが実際にSubmitするフォーム(念の為、二重に目隠し) -->

<div style=”visibility:hidden;”>

<form name=”F2” action=”http://www.google.com/webhp?” method=”get”>

<input type=”hidden” name=”text1”>

<input type=”hidden” name=”text2”>

</form>

</div>


</body>

</html>


↑実行後のアドレス欄を見れば引数が渡っていることが確認できます。

id:tebukuro

ありがとうございます。うまくいきそうです。

別のやりかたもあるかもしれませんのでもう少し受け付けておきます。もっとシンプルな記述があるとうれしいです。

2006/02/09 17:59:10
id:iketerummo No.4

iketerummo回答回数68ベストアンサー獲得回数42006/02/09 14:52:33

ポイント19pt

ito-yuさんのソースを少し変えますと

type=submitではなくbuttonです。


<input type=”button” value=”go” onClick=”this.disabled=true; sub=true; this.form.submit();”>

id:tebukuro

ありがとうございます。試してみます。

2006/02/09 17:59:47
id:kamiochiai No.5

kamiochiai回答回数11ベストアンサー獲得回数02006/02/09 18:59:07

ポイント24pt

たんに送信ボタンに type=”submit” を使わなければOKです。


<input type=”button” value=”go” onclick=”this.disabled=true;this.form.submit();”>


これだけで1. 2. 両方解決します。

id:tebukuro

ありがとうございます。一番シンプルなのでこれでいこうと思います。

2006/02/10 10:30:28
id:ohmix1 No.6

ohmix1回答回数235ベストアンサー獲得回数142006/02/09 19:19:22

ポイント19pt

IE専用です。


-------------------------------------------- Sampleここから

<html>

<head>

<script>

<!--

function not_enter() {

var c = window.event.keyCode;

if (c == 13) event.returnValue=false;

}

//-->

</script>

</head>

<body>

<form action=”http://www.google.com/search” method=”get” onsubmit=”this.disabled=true;”>

<input type=”text” name=”q” onkeypress=”not_enter();”>

<input type=”text” name=”q2” onkeypress=”not_enter();”>

<input type=”submit” value=”go”>

</form>

</body>

</html>

--------------------------------------------Sampleここまで


onkeypressでキーが[Enter]ならイベントをキャンセルしています。


submitボタンでダブルクリックに反応しない方法は難しいです。

理由は、onsubmitやonclickよりも後にondblclickイベントが発生するためで、それでも実現したい場合は

onsubmitやonclickが発生した後、ondblclickが発生しないことを待った後にsubmitするようsetTimeoutなどで時間制御してやる必要があります。


が、それは面倒なのでonsubmit時にフォームをdisabledにして、2回目のボタンクリックは効かないようにしています。


以上

id:tebukuro

ありがとうございます。いろいろ方法があるのですね。

このへんで終了にしたいと思います。

2006/02/10 10:31:44
  • id:ito-yu
    たぶん、限定用途なんでしょうけど…

    JavascriptOFFの環境だと、動かないですね、<input type=”button”>だと。
    いや、限定用途ならいいと思いますよ。社内向けとかね。
  • id:tebukuro
    Re:たぶん、限定用途なんでしょうけど…

    僕も個人的にjavascriptは嫌いですが、
    サービス仕様としてIEで動けばいいことになっているので
    まあ仕方ないかなと思います。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません