Submitting a form by pressing enter without a submit button

前端 未结 20 1537
你的背包
你的背包 2020-11-22 06:46

Well I am trying to submit a form by pressing enter but not displaying a submit button. I don\'t want to get into JavaScript if possible since I want everything to work on a

相关标签:
20条回答
  • 2020-11-22 07:09

    For those who have problems with IE and for others too.

    {
        float: left;
        width: 1px;
        height: 1px;
        background-color: transparent;
        border: none;
    }
    
    0 讨论(0)
  • 2020-11-22 07:12

    For anyone looking at this answer in future, HTML5 implements a new attribute for form elements, hidden, which will automatically apply display:none to your element.

    e.g.

    <input type="submit" hidden />
    
    0 讨论(0)
  • 2020-11-22 07:13

    Use following code, this fixed my problem in all 3 browsers (FF, IE and Chrome):

    <input  type="submit" name="update" value=" Apply " 
        style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
        hidefocus="true" tabindex="-1"/>
    

    Add above line as a first line in your code with appropriate value of name and value.

    0 讨论(0)
  • 2020-11-22 07:18

    The most elegant way of doing this is to keep the submit-button, but set it's border, padding and font-size to 0.

    This will make the button dimensions 0x0.

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

    You can try this yourself, and by setting an outline to the element you will see a dot, which is the outside border "surrounding" the 0x0 px element.

    No need for visibility:hidden, but if it makes you sleep at night, you can throw that in the mix as well.

    JS Fiddle

    0 讨论(0)
  • 2020-11-22 07:19

    I work with a bunch of UI frameworks. Many of them have a built-in class you can use to visually hide things.

    Bootstrap

    <input type="submit" class="sr-only" tabindex="-1">
    

    Angular Material

    <input type="submit" class="cdk-visually-hidden" tabindex="-1">
    

    Brilliant minds who created these frameworks have defined these styles as follows:

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    .cdk-visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        outline: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    0 讨论(0)
  • 2020-11-22 07:19

    I've used:

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

    and:

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

    in the .css file. It worked magically for me too. :)

    0 讨论(0)
提交回复
热议问题