亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何確定HTML表單上的默認提交按鈕?

如何確定HTML表單上的默認提交按鈕?

慕田峪7331174 2019-08-06 14:57:49
如何確定HTML表單上的默認提交按鈕?如果表單已提交但未通過任何特定按鈕提交,例如按下 EnterHTMLFormElement.submit()在JS中使用瀏覽器應該如何確定多個提交按鈕中的哪一個(如果有的話)用作按下的按鈕?這在兩個層面上很重要:調用onclick附加到提交按鈕的事件處理程序數據發送回Web服務器到目前為止,我的實驗表明:按下時Enter,Firefox,Opera和Safari使用表單中的第一個提交按鈕按下時Enter,IE使用第一個提交按鈕或根本不使用,具體取決于我無法弄清楚的條件所有這些瀏覽器根本不使用JS提交標準說什么?如果它會有幫助,這是我的測試代碼(PHP僅與我的測試方法相關,而不是我的問題本身)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test</title></head><body><h1>Get</h1><dl><?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?></dl><h1>Post</h1><dl><?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?></dl><form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">    <input type="text" name="method" />     <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />     <input type="text" name="stuff" />     <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />     <input type="button" value="submit" onclick="document.theForm.submit();" /></form></body></html>
查看完整描述

3 回答

?
繁星淼淼

TA貢獻1775條經驗 獲得超11個贊

Andrezj幾乎已經把它釘上了......但是這是一個簡單的跨瀏覽器解決方案。

采取這樣的形式:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/></form>

并重構:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/></form>

由于W3C規范表明多個提交按鈕有效,但忽略了用戶代理應如何處理它們的指導,因此瀏覽器制造商可以按照自己的意愿實施。我發現他們要么在表單中提交第一個提交按鈕,要么在當前具有焦點的表單字段之后提交下一個提交按鈕。

不幸的是,只需添加一種顯示風格:無; 不起作用,因為W3C規范表明應該從用戶交互中排除任何隱藏元素。所以隱藏在明顯的視線中!

以上是我最終投入生產的解決方案示例。按Enter鍵觸發默認表單提交是預期的行為,即使存在其他非默認值并且在DOM中的默認提交按鈕之前。鼠標/鍵盤與顯式用戶輸入交互的獎勵,同時避免使用javascript處理程序。

注意:通過表單的Tab鍵不會顯示任何可視元素的焦點,但仍會導致選擇不可見的按鈕。要避免此問題,只需相應地設置tabindex屬性,并在不可見的提交按鈕上省略tabindex屬性。雖然將這些樣式推廣到重要部分似乎不合適,但它們應該阻止任何框架或現有按鈕樣式干擾此修復。此外,那些內聯樣式肯定是糟糕的形式,但我們在這里證明了概念...不編寫生產代碼。


查看完整回答
反對 回復 2019-08-06
  • 3 回答
  • 0 關注
  • 1066 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號