Отправка формы нажатием кнопки ввода без кнопки отправки. - PullRequest
Новая
       54

Отправка формы нажатием кнопки ввода без кнопки отправки.

293 голосов
/ 25 января 2009

Я пытаюсь отправить форму, нажав клавишу ввода, но не отображая кнопку отправки. Я не хочу входить в 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>

Который работает довольно хорошо. Кнопка отправки работает, когда пользователь нажимает ввод, и кнопка не отображается в Firefox, IE, Safari, Opera и Chrome. Однако мне все еще не нравится это решение, поскольку трудно понять, будет ли оно работать на всех платформах со всеми браузерами.

Кто-нибудь может предложить лучший метод? Или это примерно так хорошо, как это получается?

Ответы [ 18 ]

4 голосов
/ 02 октября 2011

Это мое решение, протестированное в Chrome, Firefox 6 и IE7 +: 

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
3 голосов
/ 22 сентября 2013

самый простой способ 

<input type="submit" style="width:0px; height:0px; opacity:0;"/>
2 голосов
/ 10 ноября 2010

Для тех, у кого проблемы с IE и для других тоже. 

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
2 голосов
/ 30 марта 2017 
<input type="submit" style="display:none;"/>

Это прекрасно работает, и это самая явная версия того, чего вы пытаетесь достичь.

Обратите внимание, что существует разница между display:none и visibility:hidden для других элементов формы.

2 голосов
/ 25 января 2009

Вы также можете попробовать это 

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

Вы можете включить изображение с шириной / высотой = 0 px

0 голосов
/ 14 августа 2018

HTML5 решение 

<input type="submit" hidden />
0 голосов
/ 21 сентября 2017

Я использовал 

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

и 

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

в файле .css. У меня это тоже получилось волшебно. :)

0 голосов
/ 27 марта 2013

Я добавил его в функцию готового документа. Если в форме нет кнопки отправки (все мои диалоговые формы 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);
    });
}
Страница:
...