Vâng, tôi đang cố gắng gửi một biểu mẫu bằng cách nhấn enter nhưng không hiển thị nút gửi. Tôi không muốn truy cập JavaScript nếu có thể vì tôi muốn mọi thứ hoạt động trên tất cả các trình duyệt (cách duy nhất mà tôi biết là với các sự kiện).

Ngay bây giờ hình thức trông như thế này:

<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>

Mà hoạt động khá tốt. Nút gửi hoạt động khi người dùng nhấn enter và nút này không hiển thị trong Firefox, IE, Safari, Opera và Chrome. Tuy nhiên, tôi vẫn không thích giải pháp vì thật khó để biết liệu nó có hoạt động trên tất cả các nền tảng với tất cả các trình duyệt hay không.

Bất cứ ai có thể đề nghị một phương pháp tốt hơn? Hoặc điều này là tốt như nó được?

Thử:

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

Điều đó sẽ đẩy nút waaay sang trái, ra khỏi màn hình. Điều tuyệt vời với điều này là, bạn sẽ có được sự xuống cấp duyên dáng khi CSS bị vô hiệu hóa.

Cập nhật - Cách giải quyết cho IE7

Theo đề xuất của Bryan Downing + với tabindexđể ngăn tab chạm tới nút này (bởi Ates Goral):

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

Tôi nghĩ bạn nên đi theo con đường Javascript, hoặc ít nhất là tôi sẽ:

<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>

Bạn đã thử điều này?

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

Vì hầu hết các trình duyệt đều hiểu visibility:hiddenvà nó không thực sự hoạt động như vậy display:none, nên tôi đoán rằng nó sẽ ổn thôi. Không thực sự tự kiểm tra nó, vì vậy CMIIW.

Một giải pháp khác không có nút gửi:

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

});

Đối với bất kỳ ai nhìn vào câu trả lời này trong tương lai, HTML5 sẽ triển khai một thuộc tính mới cho các thành phần của biểu mẫu hidden, sẽ tự động áp dụng display:nonecho phần tử của bạn.

ví dụ

<input type="submit" hidden />

Sử dụng mã sau, điều này đã khắc phục sự cố của tôi trong cả 3 trình duyệt (FF, IE và Chrome):

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

Thêm dòng trên là dòng đầu tiên trong mã của bạn với giá trị tên và giá trị phù hợp.

Thay vì hack mà bạn hiện đang sử dụng để ẩn nút, việc đặt visibility: collapse;thuộc tính style sẽ đơn giản hơn nhiều . Tuy nhiên, tôi vẫn khuyên bạn nên sử dụng một chút Javascript đơn giản để gửi biểu mẫu. Theo tôi hiểu, hỗ trợ cho những thứ như vậy là phổ biến hiện nay.

Chỉ cần đặt thuộc tính ẩn thành 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>

Cách thức thanh lịch nhất để thực hiện việc này là giữ nút gửi, nhưng đặt đường viền, phần đệm và cỡ chữ thành 0.

Điều này sẽ làm cho kích thước nút 0x0.

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

Bạn có thể tự mình thử điều này và bằng cách đặt phác thảo cho phần tử bạn sẽ thấy một dấu chấm, đó là đường viền bên ngoài "bao quanh" phần tử 0x0 px.

Không cần tầm nhìn: ẩn, nhưng nếu nó khiến bạn ngủ vào ban đêm, bạn cũng có thể ném nó vào hỗn hợp.

Fiddle

IE không cho phép nhấn phím ENTER để gửi biểu mẫu nếu nút gửi không hiển thị và biểu mẫu có nhiều trường. Cung cấp cho nó những gì nó muốn bằng cách cung cấp hình ảnh trong suốt 1x1 pixel dưới dạng nút gửi. Tất nhiên nó sẽ chiếm một pixel của bố cục, nhưng hãy nhìn những gì bạn phải làm để ẩn nó.

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

Đây là giải pháp của tôi, đã được thử nghiệm trong Chrome, Firefox 6 và IE7 +:

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

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

Điều này hoạt động tốt và nó là phiên bản rõ ràng nhất về những gì bạn đang cố gắng đạt được.

Lưu ý rằng có một sự khác biệt giữa display:nonevà visibility:hiddencho các yếu tố hình thức khác.

Giải pháp HTML5

<input type="submit" hidden />

cách đơn giản nhất

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

Đối với những người có vấn đề với IE và cho những người khác.

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

Bạn cũng có thể thử cái này

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

Bạn có thể bao gồm một hình ảnh với width / height = 0 px

Tôi làm việc với một loạt các khung UI. Nhiều người trong số họ có một lớp tích hợp mà bạn có thể sử dụng để ẩn trực quan mọi thứ.

Bootstrap

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

Vật liệu góc

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

Những bộ óc thông minh đã tạo ra những khung này đã định nghĩa những phong cách này như sau:

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

Tôi đã thêm nó vào một chức năng trên tài liệu đã sẵn sàng. Nếu không có nút gửi trên biểu mẫu (tất cả Biểu mẫu hộp thoại Jquery của tôi không có nút gửi), hãy thêm nó vào.

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

Tôi đã sử dụng:

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

và:

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

trong tệp .css. Nó làm việc kỳ diệu cho tôi quá. :)