button区别 - html form file



通过按Enter键提交表单而无需提交按钮 (12)

那么我试图通过按回车来提交表单,但不显示提交按钮。 如果可能的话,我不想进入JavaScript,因为我希望所有的浏览器都能正常工作(我知道的唯一的JS方式是事件)。

现在,表单看起来像这样:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

这工作得很好。 提交按钮在用户按下Enter键时起作用,并且该按钮不会在Firefox,IE,Safari,Opera和Chrome中显示。 但是,我仍然不喜欢该解决方案,因为很难知道它是否可以在所有浏览器的所有平台上运行。

任何人都可以提出更好的方法? 或者这是否和它一样好?

https://ffff65535.com


你也可以试试这个

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

您可以包含宽度/高度= 0像素的图像


你试过这个吗?

<input type="submit" style="visibility: hidden;" />

由于大多数浏览器都了解visibility:hidden ,它并不像display:none那样工作,但我猜测它应该没问题。 还没有真正测试过它自己,所以CMIIW。


取代当前用来隐藏按钮的黑客,设置visibility: collapse;会更简单visibility: collapse; 在style属性中。 不过,我仍然建议使用一些简单的Javascript来提交表单。 据我所知,现在对这种事情的支持是无处不在的。


只需将hidden属性设置为true即可:

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" hidden="true" />
</form>

对于IE和其他人有问题的人。

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

对于将来要查看此答案的任何人,HTML5会为表单元素实现一个新的属性, hidden ,它会自动将display:none应用于元素。

例如

<input type="submit" hidden />

我将它添加到文档准备就绪的功能上。 如果表单上没有提交按钮(我的所有Jquery对话框都没有提交按钮),请附加它。

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

我用过了

< input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit()"; />

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

在.css文件中。 它对我也很神奇。 :)


最简单的方法

<input type="submit" style="width:0px; height:0px; opacity:0;"/>

没有提交按钮的另一种解决方案

HTML

<form>
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery的

$(document).ready(function() {

  $('.submit_on_enter').keydown(function(event) {
    // enter has keyCode = 13, change it if you want to use another button
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });

});

这样做的最优雅的方式是保持提交按钮,但将边框,填充和字体大小设置为0。

这将使按钮尺寸为0x0。

<input type="submit" style="border:0; padding:0; font-size:0">

你可以自己尝试,通过设置元素的轮廓,你会看到一个点,这是外围边界“围绕”0x0像素元素。

不需要可见性:隐藏,但如果它让你在晚上睡觉,你也可以把它扔在混合物中。

JS小提琴


<input type="submit" style="display:none;"/>

这工作正常,它是你想要实现的最明确的版本。

请注意, display:nonevisibility:hidden对于其他表单元素是有区别的。





submit