Я намагаюся подати форму, натиснувши клавішу Enter, але не відображаючи кнопку подання. Я не хочу потрапляти в 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. Однак мені все ще не подобається рішення, оскільки важко знати, чи буде він працювати на всіх платформах із усіма браузерами.

Чи може хтось запропонувати кращий метод? Або це приблизно так добре, як виходить?

Спробуйте:

<input type="submit" style="position: absolute; left: -9999px"/>

Це натисне кнопку waaay вліво, поза екраном. Приємно з цим, що ви отримаєте витончену деградацію, коли CSS відключений.

Оновлення - вирішення IE7

Як запропонував Брайан Даунінг +, tabindexщоб запобігти вкладці до цієї кнопки (автор: Атес Горал):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />

Я думаю, ви повинні піти по маршруту Javascript, або, принаймні, я б:

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>


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

Ви пробували це?

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

Оскільки більшість веб-переглядачів розуміє, що visibility:hiddenце насправді не працює display:none, я думаю, що це повинно бути добре. Я справді не перевіряв його сам, тому CMIIW.

Ще одне рішення без кнопки надсилання:

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;
    }
  });

});

Для тих, хто шукає цю відповідь у майбутньому, HTML5 реалізує новий атрибут для елементів форми hidden, який автоматично застосовуєтьсяdisplay:none до вашого елемента.

напр

<input type="submit" hidden />

Використовуючи наступний код, це вирішило мою проблему у всіх 3 браузерах (FF, IE та Chrome):

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

Додайте верхній рядок як перший рядок у коді з відповідним значенням імені та значення.

Замість хаку, який ви зараз використовуєте для приховування кнопки, було б набагато простіше встановити visibility: collapse;атрибут стилю. Однак я все-таки рекомендую використовувати трохи простого Javascript, щоб подати форму. Наскільки я розумію, підтримка таких речей є всюди поширеною.

Просто встановіть прихований атрибут у 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>

Найелегантніший спосіб зробити це - утримувати кнопку подання, але встановити рамку, розмір шрифту та розмір шрифту 0.

Це зробить розміри кнопки 0x0.

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

Ви можете спробувати це самостійно, і встановивши контур до елемента, ви побачите крапку, яка зовнішня межа "оточує" елемент 0x0 px.

Немає необхідності в видимості: приховано, але якщо ви змусите спати вночі, ви можете кинути це і в суміш.

JS Fiddle

IE не дозволяє натискати клавішу ENTER для подання форми, якщо кнопка подання не видно, а форма має більше одного поля. Надайте їй те, що хоче, надаючи прозоре зображення 1x1 пікселя як кнопку подання. Звичайно, це займе піксель макета, але подивіться, що вам потрібно зробити, щоб приховати його.

<input type="image" src="img/1x1trans.gif"/>

Це моє рішення, перевірене в Chrome, Firefox 6 та IE7 +:

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

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

Це прекрасно працює, і це найбільш явна версія того, що ви намагаєтеся досягти.

Зверніть увагу , що є різниця між display:noneі visibility:hiddenдля інших елементів форми.

Рішення HTML5

<input type="submit" hidden />

найпростіший спосіб

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

Для тих, хто має проблеми з IE, а також для інших.

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

Ви можете спробувати і це

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

Ви можете включити зображення з шириною / висотою = 0 пікс

Я працюю з купою фреймворків інтерфейсу. У багатьох з них є вбудований клас, який можна використовувати для візуального приховування речей.

Завантажувальний

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

Кутовий матеріал

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

Блискучі уми, які створили ці рамки, визначали такі стилі так:

.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;
}

Я додав його до функції, готової до документа. Якщо у формі немає кнопки подання (усі мої форми діалогу 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.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

Я використовував:

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

і:

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

у файлі .css. Це працювало магічно і для мене. :)