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>

어느 것이 잘 작동합니까? 제출 버튼은 사용자가 enter를 누를 때 작동하며 Firefox, IE, Safari, Opera 및 Chrome에 버튼이 표시되지 않습니다. 그러나 모든 브라우저가있는 모든 플랫폼에서 작동하는지 여부를 알기가 어렵 기 때문에 여전히 솔루션을 좋아하지 않습니다.

누구든지 더 나은 방법을 제안 할 수 있습니까? 아니면 얻을만큼 좋은가요?

시험:

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

화면에서 버튼을 왼쪽으로 밀어냅니다. 이것의 좋은 점은 CSS가 비활성화되면 정상적으로 저하됩니다.

업데이트-IE7에 대한 해결 방법

Bryan Downing +에서 제안한대로 tabindex탭 이이 버튼에 닿지 않도록 (Ates Goral) :

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

나는 당신 이 자바 스크립트 경로를 가야 한다고 생각합니다 .

<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를 사용하여 양식을 제출하는 것이 좋습니다. 내가 이해하는 한, 오늘날 그러한 것들에 대한 지원은 어디에나 있습니다.

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>

가장 우아한 방법은 제출 버튼을 유지하지만 테두리, 패딩 및 글꼴 크기를 0으로 설정하는 것입니다.

버튼 크기가 0x0이됩니다.

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

직접 시도해 볼 수 있으며 요소에 윤곽선을 설정하면 0x0 px 요소를 둘러싸는 바깥 쪽 테두리 인 점이 표시됩니다.

가시성이 필요하지 않습니다. 숨겨져 있지만 밤에 잠을 자면 믹스에 넣을 수도 있습니다.

JS 피들

제출 단추가 표시되지 않고 양식에 필드가 둘 이상 있으면 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 px 인 이미지를 포함 할 수 있습니다.

많은 UI 프레임 워크로 작업합니다. 그들 중 다수는 시각적으로 물건을 숨기는 데 사용할 수있는 내장 클래스를 가지고 있습니다.

부트 스트랩

<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 파일에서. 그것은 나를 위해 마술처럼 작동했습니다. :)