使用 div 提交表单答案

【问题标题】：Form submission with div使用 div 提交表单
【发布时间】：2012-04-20 11:32:25
【问题描述】：

我的网站上有一个用于登录的表单。为了使表单看起来更好，我使用了一个 div 作为提交按钮，它使用 onclick="login()"。这一切都很好，除了一件事：当你输入你的用户名，点击标签，输入你的密码，点击回车，回车不会提交表单。

有没有办法让表单在输入时提交而无需编写疯狂的 javascript 来监视按键？或者更好的是，有没有一种方法可以在不使用图像的情况下将提交按钮设置为看起来不像按钮？

我的按钮实际上只是我设计的看起来可点击的文本。

提前致谢！

【问题讨论】：

标签： javascript html forms styles submit

【解决方案1】：

不要。如果您的用户没有 javascript，他们将永远无法提交您的表单。您必须始终使您的网站在没有 javascript 的情况下可用。这称为Graceful degradation 或Progressive enhancement。

否则，它会是这样的：

document.getElementById('your-form').onkeypress = function(e) {
    if (e.keyCode === 13) { // If the key pressed is [Enter]. See here for a list: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
        login()
    }
}

【讨论】：

【解决方案2】：

submit 类型的输入基本上是针对您正在寻找的默认 ENTER 键行为。

有无数种方法可以设置表单按钮的样式。

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

【讨论】：

【解决方案3】：

设置：

background-color: transparent;
border-width: 0;

在您的按钮上，它现在又恢复到与普通文本一样的外观。从那里去。

【讨论】：

【解决方案4】：

将您的提交按钮设置为看起来像纯文本：

#mySubmitButton {
    background:none!important;
    border:none; 
    padding:0!important;
}

【讨论】：