發表者討論內容

冷日
(冷日) 發表時間：2011/12/14 14:20

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[分享]如何讓Form不要因為Enter就自動Submit？

現在的Browser，都會在判讀到Enter時自動把Form Submit出去！
在某些要做特殊動作的Form裡面，就變成我們的困擾了。
為了解決這個問題上網查了一下，發現這一篇：

格子樑 | 艾倫郭 | AllenKuo.com : ASP.NET 電子書By Allen Kuo, 建立日期:2008/06/12 09:41
有時在 textbox 裡輸入值後按下 enter,表單就送出了, 如果您要避免,可以用...

<form>
<input type="text" name="t1"><br>
<input type="text" name="t2"><br>
<input type="text" name="t3"><br>
<input type="text" name="t4"><br>
<input type="text" name="t5"><br>
<input type="submit">
</form>
<script>
document.onkeydown = function() {
if (window.event)
if (event.keyCode == 13 && event.srcElement.nodeName != "TEXTAREA" && event.srcElement.type != "submit")
event.keyCode = 9;
}
</script>
<form>
<input type="text" name="t1"><br>
<input type="text" name="t2"><br>
<input type="text" name="t3"><br>
<input type="text" name="t4"><br>
<input type="text" name="t5"><br>
<input type="submit">
</form>
<script>
document.onkeydown = function() {
if (window.event)
if (event.keyCode == 13 && event.srcElement.nodeName != "TEXTAREA" && event.srcElement.type != "submit")
event.keyCode = 9;
}
</script>

轉載自 : http://www.blueshop.com.tw/board/show.asp?subcde=BRD20080611163828QLC&fumcde=FUM20041006161839LRJ

還有另外一篇：

淺談PHP業餘玩家:FORM下停止/啟用enter觸發submit - 樂多日誌

不讓Enter起作用：
在要輸入的text中加入

<input type=”text” onKeyPress=”return FormEnterKey(event)”>

然後

<script language="JavaScript">
function FormEnterKey(e) {
     var key;
     if(window.event)
          key = window.event.keyCode;
     else
          key = e.which;
     return (key != 13);
}
</script>

讓Enter作用：

<form> TEXT:
<input name=text1 type=text onKeyPress="return SubmitEnter(this,event)"><BR>
<input TYPE=submit value="登入">
</form>
<SCRIPT TYPE="text/javascript">
<!--
function SubmitEnter(myform,e) {
  var keycode;
  if (window.event) keycode = window.event.keyCode;
  else if (e) keycode = e.which;
  else return true;
  if (keycode == 13) {
    myform.form.submit();
    return false;
  }
  else
    return true;
}
//-->
</SCRIPT>

可是真的需要這麼複雜嗎！？
我們不就是單純希望Form不要自動的看到Enter就Submit出去嗎！？
後來查到了這個關鍵：

<form onsubmit="return false">

也就是說，Form裡面的Parameter中，就有『onsubmit』這個Method！
只要把他設定為「return false」即可達到我們最初的目的：
Form不要因為Enter就自動Submit了！

當然，細節我們可以參考：
停用按下enter後會submit--firefox and IE- 藍色小舖 BlueShop
中(不來ㄣ)大的說明！
祝大家順利喔～

回覆

平面展開

前一個主題 | 下一個主題 | |

| |

討論串

» [分享]如何讓Form不要因為Enter就自動Submit？ (冷日
(冷日), 2011/12/14 14:20)

發表新主題

網頁設計 : [分享]如何讓Form不要因為Enter就自動Submit？

討論串