html - 한개 - javascript enter to submit




submit 버튼없이 enter 키를 눌러 폼 제출하기 (12)

HTML5 솔루션

<input type="submit" hidden />

글쎄, 입력 버튼을 눌러 제출 버튼을 표시하지 않고 양식을 제출하려고합니다. 가능하다면 모든 브라우저 (모든 JS가 내가 이벤트라고 알고있는 방식)에서 모든 것을 작동시키기를 원하기 때문에 JavaScript로 들어가고 싶지 않습니다.

지금 양식은 다음과 같습니다.

<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에 표시되지 않습니다. 그러나 모든 브라우저에서 모든 플랫폼에서 작동하는지 여부를 알기가 어렵 기 때문에 여전히 해결책이 마음에 들지 않습니다.

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


IE는 제출 단추가 보이지 않고 양식에 둘 이상의 필드가있는 경우 양식 제출을 위해 ENTER 키를 누르는 것을 허용하지 않습니다. 제출 버튼으로 1x1 픽셀 투명한 이미지를 제공하여 원하는 것을 제공하십시오. 물론 레이아웃의 픽셀을 차지할 것이지만 숨기기 위해해야 ​​할 일이 있는지 살펴보십시오.

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

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>

가장 간단한 방법

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

나는 그것을 문서 준비 기능에 추가했다. 양식에 제출 단추가 없으면 (모든 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);
    });
}

나는 당신 자바 스크립트 루트를 가야한다고 생각 한다 .

<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="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

너비 / 높이 = 0 픽셀의 이미지를 포함 할 수 있습니다.


다음 코드를 사용하면이 세 가지 브라우저 (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"/>

위의 행을 적절한 값의 이름과 값으로 코드의 첫 번째 행으로 추가하십시오.


시험:

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

이거 해봤 니?

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

대부분의 브라우저는 visibility:hidden 이해하기 때문에 visibility:hidden 것이고 실제로는 display:none 처럼 작동하지 않습니다 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;
    }
  });

});

현재 버튼을 숨기기 위해 사용하는 해킹 대신 visibility: collapse; 을 설정하는 것이 훨씬 간단합니다 visibility: collapse; 스타일 속성 그러나 양식을 제출하려면 간단한 Javascript를 사용하는 것이 좋습니다. 내가 아는 한, 그런 것들에 대한 지원은 요즘 유비 쿼터스입니다.





submit