对表单和提交按钮感到困惑

时间:2011-06-11 16:24:32

标签: javascript html css

我的表格如下:

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST">
<div align="center">
<br><br>

<br><input type="submit" value="ABC" tabindex=0><br>
<br><input type="button" value="cancel"><br>
</div>
</form>
</body>
</html>

我希望在按下ENTER按钮时提交表单,并且还希望提交按钮周围有一些颜色以显示它是默认的。

但似乎我必须单击选项卡按钮才能使提交在其周围显示蓝色作为默认值。

有没有办法让提交按钮始终是默认设置,并且总是在它周围涂上一个蓝色圆圈来表示这个?

另外如果我在同一个html页面上有其他输入字段但超出默认值。我需要的是,无论我在该页面上的哪个位置,当我按下输入时,表单总是会提交。有没有办法做到这一点?

5 个答案:

答案 0 :(得分:1)

提交应该始终是默认值 - 而表单是关注的,这在这里很难,因为您没有真正的input字段。这种形式实际上做了什么?

除此之外,不要覆盖浏览器的默认UI行为:您只会混淆用户。

答案 1 :(得分:0)

对于你的enter-anywhere-submit,我会用jQuery来做。一点点的搜索让我想到了这个:

Submitting a form on 'Enter' with jQuery?

答案 2 :(得分:0)

在表单上,​​只有当前聚焦的元素具有蓝色轮廓,这通常是与平台相关的功能。

话虽如此,您可以使用一点CSS自定义该大纲,以使表单在浏览器中看起来一致:

form *:focus {
    outline:2px solid blue;
}

现在,要使提交按钮始终显示该大纲,我会给它class "default"

<input type="submit" value="ABC" tabindex="0" class="default">

然后更改上面的CSS以包含该类:

form *:focus, input.default {
    outline:2px solid blue;
}

至于提交输入表格:只要表格中的元素有焦点,点击输入将默认提交表格。如果您希望在 没有形式的情况下发生这种情况,那么您需要使用一点JavaScript,但我不推荐它,因为正如Tomalak在他的回答中所说,不应该改变浏览器的默认行为。

答案 3 :(得分:0)

如果使用Jquery,您可以将事件处理程序附加到标记HTML(或文档本身)。由于事件冒泡了DOM,即使它在表单之外,也会直接触发它。然后,如果按下的键是RETURN,则提交表格。

$(document).keyup(function(event){
    if (event.keyCode == 13){
         $('form[name=myform]').submit();
     }
});

答案 4 :(得分:-1)

您可以将其置于正文加载中并将提交的ID设置为mysubmit

document.getElementById("mysubmit").focus();

<br><input type="submit" value="ABC" tabindex=0 id="mysubmit"><br>

编辑:
似乎我部分理解了这个问题。我可以提供另一种部分解决方案,因为您实际上可能无法提出要求。您可以捕获文档按键,并自己调用post函数。但是,这不会显示按钮处于活动状态。除此之外,如果用户单击其他位置,您可以使用文档鼠标事件重新聚焦按钮。但我建议你不要这样做。更好的方法可能是使用专门显示所需按钮始终处于活动状态的图像字段。我可以问你为什么需要这个吗?