사용자가 양식을 제출 타격하여 입력

Question

나는 조사 웹 사이트에서,그리고 이 문제가 사용자가 입력(내가 알지 못하는 이유)및 실수로 제출 조사서(form)를 클릭하지 않고 제출 버튼입니다.이 있을 방지하는 방법 이?

내가 사용하여 HTML,PHP5.2.9 튜토리얼에서 설문 조사.

Answer 1

다음과 같은 방법을 사용할 수 있습니다

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

원래 게시물에 대한 주석을 읽을 때, 더 유용하고 사람들이 누를 수 있도록 입력하다 그들이 모든 필드를 완료 한 경우 :

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Answer 2

어디서나 키를 입력 할 수 없습니다

당신이 없다면 <textarea> 당신의 형태로 다음을 추가하십시오. <form>:

<form ... onkeydown="return event.key != 'Enter';">

또는 jQuery와 함께 :

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

이로 인해 양식 내부의 모든 키 프레스가 key. 그렇지 않은 경우 Enter, 그러면 돌아올 것입니다 true 그리고 평소와 같이 계속됩니다. 그렇다면 Enter, 그러면 돌아올 것입니다 false 그리고 무엇이든 즉시 중지되므로 양식이 제출되지 않습니다.

그만큼 keydown 이벤트가 선호됩니다 keyup 로서 keyup 양식 제출을 차단하기에는 너무 늦었습니다. 역사적으로도있었습니다 keypress, 그러나 이것은 그와 마찬가지로 더 이상 사용되지 않습니다 KeyboardEvent.keyCode. 당신은 사용해야합니다 KeyboardEvent.key 대신 누르면 키의 이름을 반환합니다. 언제 Enter 확인하면 108 (Numpad Enter)뿐만 아니라 13 (정상 Enter)을 확인합니다.

주목하십시오 $(window) 대신 다른 답변에서 제안한 바와 같이 $(document) 작동하지 않습니다 keydown/keyup IE <= 8에서는 가난한 사용자를 커버하는 것이 좋지 않으면 좋은 선택이 아닙니다.

TextAreas에서만 키를 입력하십시오

당신이있는 경우 <textarea> 당신의 형태로 (물론 ~해야 한다 Enter 키를 수락 한 다음 Keydown 핸들러를 모든 개별 입력 요소에 추가하십시오. <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

보일러 플레이트를 줄이려면 jQuery로 수행하는 것이 좋습니다.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

해당 입력 요소에 다른 이벤트 핸들러 기능이 첨부 된 경우 어떤 이유로 Enter 키에서 호출하려는 경우, 거짓을 반환하는 대신 이벤트의 기본 동작 만 방지하여 다른 핸들러로 올바르게 전파 될 수 있습니다.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Textareas에서 키를 입력하고 버튼 만 제출하십시오

제출 버튼에서 Enter 키를 허용하려면 <input|button type="submit"> 그러면 항상 아래와 같이 선택기를 개선 할 수 있습니다.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

주목하십시오 input[type=text] 다른 답변에서 제안한 바와 같이, 해당 HTML5 비 텍스트 입력을 다루지 않으므로 좋은 선택이 아닙니다.

Answer 3

양식이 제출되는 것을 방지하기 위해 프레스 키와 관련된 세 가지 이벤트를 모두 잡아야했습니다.

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

위의 모든 것을 멋진 컴팩트 버전으로 결합 할 수 있습니다.

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Answer 4

섹션 4.10.22.2 암시 적 제출 W3C HTML5 사양 중 :

ㅏ form 집단 기본 버튼 첫 번째입니다 제출 버튼 안에 나무 순서 누구 양식 소유자 그게 다 form 요소.

사용자 에이전트가 사용자가 암시 적으로 양식을 제출하도록 지원하는 경우 (예를 들어, 텍스트 필드가 암시 적으로 양식을 제출하는 동안 "ENTER"키를 누르는 일부 플랫폼에서) 기본 버튼 정의되어 있습니다 활성화 행동 사용자 에이전트를 유발해야합니다 합성 클릭 활성화 단계를 실행하십시오 그것에 기본 버튼.

메모: 결과적으로 기본 버튼 비활성화되면, 그러한 암시 적 제출 메커니즘이 사용될 때 양식이 제출되지 않습니다. (버튼에는 없음 활성화 행동 장애인시.)

따라서 양식의 암시 적 제출을 비활성화하는 표준 준수 방법은 비활성화 된 제출 버튼을 양식의 첫 번째 제출 버튼으로 배치하는 것입니다.

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

이 접근법의 좋은 특징 중 하나는 그것이 작동한다는 것입니다. JavaScript없이; JavaScript가 활성화되어 있는지 여부는 암시 적 양식 제출을 방지하기 위해 표준 정보 웹 브라우저가 필요합니다.

Answer 5

스크립트를 사용하여 실제 제출을 수행하는 경우 다음과 같이 OnSubmit 핸들러에 "Return False"라인을 추가 할 수 있습니다.

<form onsubmit="return false;">

JavaScript의 양식에 제출 () 호출은 이벤트가 트리거되지 않습니다.

Answer 6

사용:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

이 솔루션은 웹 사이트의 모든 형태 (Ajax와 함께 삽입 된 양식)에서만 작동하며 입력하다입력 텍스트에 s. 문서 준비 기능에 넣고이 문제를 잊어 버리십시오.

Answer 7

사용자가 누르는 것을 방지하는 대신 입력하다, 부자연스럽지 않은 것처럼 보일 수 있으면 양식을 그대로 남겨두고 추가 클라이언트 측 유효성 검사를 추가 할 수 있습니다. 설문 조사가 끝나지 않으면 결과가 서버로 전송되지 않으며 사용자는 완료해야 할 사항을 알려주는 멋진 메시지를 얻습니다. 양식을 작성하십시오. jQuery를 사용하는 경우 유효성 검사 플러그인을 사용해보십시오.

http://docs.jquery.com/plugins/validation

이것은 잡기보다 더 많은 작업이 필요합니다 입력하다 버튼이지만 확실히 더 풍부한 사용자 경험을 제공합니다.

Answer 8

아직 언급 할 수 없으므로 새로운 답변을 게시하겠습니다.

받아 들여진 답변은 괜찮지 만 Numpad Enter에서 제출을 중단하지 않았습니다. 최소한 현재 버전의 Chrome에서. 키 코드 조건을이를 변경해야했고 작동했습니다.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Answer 9

멋진 간단한 작은 jQuery 솔루션 :

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Answer 10

목표에 도달하는 것이 나의 해결책이며, 깨끗하고 효과적입니다.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Answer 11

완전히 다른 방법:

1. 첫번째 <button type="submit"> 에서 형태로 활성화됩니다에 누르 입력.
2. 이 경우에도 마찬가지입니다 버튼을 숨겨진 style="display:none;
3. 에 대한 스크립트는 반환할 수 있는 버튼 false, 는 중단에 제출하는 과정입니다.
4. 당신은 여전히 수 있습니다 다른 <button type=submit> 하기 양식을 제출합니다.그냥 돌아 true 를 캐스케이드 제출.
5. 러 입력 는 동안 실제로 제출 버튼 초점을 맞춘 것이 활성화를 실시 제출 버튼입니다.
6. 러 입력 안 <textarea> 또는 다른 형태로 제어할 것이 행동으로 정상입니다.
7. 러 입력 안 <input> 양식 컨트롤 트리거합니다 첫째 <button type=submit>, 을 반환하는 false, 고,따라서 아무 일도 일어나지 않습니다.

따라서:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Answer 12

양식에 'JavaScript : void (0);' 트릭을하는 것 같습니다

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Answer 13

특정 입력 만 제출하는 것을 방지해야했기 때문에 클래스 선택기를 사용하여 필요한 곳마다 "글로벌"기능이되었습니다.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

그리고이 jQuery 코드 :

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

또는 키 다운이 불충분 한 경우 :

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

몇 가지 메모 :

여기에서 다양한 좋은 답변을 수정합니다 입력하다 키는 효과가있는 것 같습니다 keydown 모든 브라우저에서. 대안을 위해, 나는 업데이트했다 bind() ~로 on() 방법.

저는 모든 장단점과 성과 토론을 평가하는 클래스 셀렉터의 열렬한 팬입니다. 내 이름 지정 컨벤션은 jQuery가 ID로 사용하고 CSS 스타일과 분리되어 있음을 나타 내기위한 'idsomething'입니다.

Answer 14

1. 사용하지 마세요 type = "제출" 입력 또는 버튼의 경우.
2. 사용 type = "버튼" JS [jQuery/angular/etc]를 사용하여 서버에 양식을 제출하십시오.

Answer 15

JavaScript 방법을 만들어 입력하다 키가 치고 제출을 중지했습니다.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

제출 방법에서 호출하십시오.

Answer 16

제출 버튼을 넣지 않으면 할 수 있습니다. 입력 (type = button)에 스크립트를 넣거나 양식으로 데이터를 제출하려면 eventListener를 추가하십시오.

오히려 이것을 사용하십시오

<input type="button">

이것을 사용하는 것보다

<input type="submit">

Answer 17

나는 "ajax textfields"(yii cgridview)와 하나의 제출 버튼이있는 그리드를 가진 비슷한 문제가있었습니다. 텍스트 필드에서 검색을 할 때마다 제출 된 양식을 입력하십시오. 뷰 사이 (MVC 패턴) 사이의 유일한 일반적인 버튼이기 때문에 버튼으로 무언가를해야했습니다. 내가해야 할 일은 제거뿐이었습니다 type="submit" 그리고 넣습니다 onclick="document.forms[0].submit()

Answer 18

나는 그것이 모든 답변으로 잘 다루었다고 생각하지만, JavaScript 유효성 검사 코드가 포함 된 버튼을 사용하는 경우, 예상대로 제출에 전화하기 위해 양식의 onkeypress를 설정할 수 있습니다.

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

Onkeypress JS는 당신이해야 할 일이 될 수 있습니다. 더 큰 글로벌 변화가 필요하지 않습니다. 앱을 처음부터 코딩하는 사람이 아니라면 특히 그렇습니다. 다른 사람의 웹 사이트를 찢어 버리고 다시 테스트하지 않고 수정했습니다.

Answer 19

여기에는 이미 많은 좋은 답변이 있습니다. UX 관점에서 무언가를 제공하고 싶습니다. 형태의 키보드 컨트롤입니다 매우 중요한.

문제는 Keypress의 제출에서 비활성화하는 방법입니다. Enter. 무시하는 방법이 아닙니다 Enter 전체 응용 프로그램에서. 따라서 핸들러를 창이 아닌 양식 요소에 연결하는 것을 고려하십시오.

비활성화 Enter 양식 제출의 경우 여전히 다음을 허용해야합니다.

1. 양식 제출을 통해 Enter 제출 버튼이 집중 될 때.
2. 양식 제출 모든 필드가 채워질 때.
3. 비 방향 버튼과의 상호 작용을 통해 Enter.

이것은 단지 상용구이지만 세 가지 조건을 모두 따릅니다.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Answer 20

블록 제출 만 제출하지만 기타, 다른 중요한 기능은 <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Answer 21

내 특정 경우에는 양식을 제출하지 못하고 제출 버튼의 클릭을 시뮬레이션해야했습니다. 제출 버튼에 모달 창 내에 있었기 때문에 클릭 핸들러가 있었기 때문입니다 (구식 코드). 어쨌든 여기 에이 경우에 내 콤보 솔루션이 있습니다.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

이 유스 케이스는 IE8과 함께 일하는 사람들에게 특히 유용합니다.

Answer 22

이것은 나를 위해 작동합니다

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});

Answer 23

내가 보지 못한 것만으로 답변 : 페이지의 요소를 탭하면 누르면 입력하다 제출 버튼에 도달하면 양식에서 OnSubmit 핸들러를 트리거하지만 이벤트를 Mouseevent로 기록합니다. 다음은 대부분의 기지를 다루는 짧은 솔루션입니다.

이것은 jQuery 관련 답변이 아닙니다

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

자바 스크립트

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

작업 예제를 찾으려면 : https://jsfiddle.net/nemesarial/6rhogva2/

Answer 24

작은 커피 스크립트 코드를 추가하고 싶습니다 (현장 테스트 아님) :

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(조항이 아닌 경우 좋은 속임수를 좋아하기를 바랍니다.)

Answer 25

으로 이동 css 를 추가하는 것 그것이 자동으로 차단하의 제출 formular 로 제출력을 더 이상 원하지 않는 경우 그것은 당신이 그것을 삭제할 수 있습니다 또는 형식 activate 고 deactivate 대

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Answer 26

사용 자바 스크립트 (입력 필드를 확인하지 않고) :

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

누군가가 특정 필드에이를 적용하려는 경우, 예를 들어 입력 유형 텍스트 :

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

이것은 제 경우에는 잘 작동합니다.

Answer 27

이것은 다른 솔루션에 대한 많은 좌절 후 모든 브라우저에서 저에게 효과적이었습니다. Name_Space OUTER 기능은 글로벌을 선언하지 않도록하는 것입니다.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

샘플 사용 :

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Answer 28

사용:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

Answer 29

제 경우에는 몇 가지가있었습니다 jQuery UI 형태의 자동 완성 필드와 텍스트 웨이즈, 그래서 나는 그들이 확실히 받아들이기를 원했습니다. 입력하다. 그래서 나는 그것을 제거했다 type="submit" 양식에서 입력하고 앵커를 추가했습니다 <a href="" id="btn">Ok</a> 대신에. 그런 다음 버튼으로 스타일링하고 다음 코드를 추가했습니다.

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

사용자가 필요한 모든 필드를 채우는 경우 validateData() 성공하고 양식이 제출됩니다.