[javascript] ENTER 키를 눌러 웹 양식을 제출하지 못하게하는 방법은 무엇입니까?

ENTER웹 기반 응용 프로그램에서 키 누르기가 양식을 제출 하지 못하게하려면 어떻게합니까 ?



답변

[ 개정 2012, 인라인 핸들러 없음, 텍스트 영역 입력 처리 유지]

function checkEnter(e){
 e = e || event;
 var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
 return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

이제 <form […] onkeypress = “return checkEnter (event)”> 형식으로 키 누르기 핸들러를 정의 할 수 있습니다.

document.querySelector('form').onkeypress = checkEnter;


답변

다음은 제출 제출을 중지하고 백 스페이스 키-> 뒤로를 중지하는 데 사용할 수있는 jQuery 핸들러입니다. “keyStop”객체의 (keyCode : selectorString) 쌍은 기본 동작을 실행하지 않아야하는 노드를 일치시키는 데 사용됩니다.

웹은 접근하기 쉬운 장소 여야하며 이는 키보드 사용자의 기대를 상회하고 있습니다. 내 경우에는 작업중 인 웹 응용 프로그램이 뒤로 버튼을 좋아하지 않으므로 키 바로 가기를 비활성화하는 것이 좋습니다. “입력해야합니다-> 제출”토론은 중요하지만 실제 질문과는 관련이 없습니다.

접근성에 대해 생각하고 실제로 왜 그렇게하고 싶은지에 대한 코드는 다음과 같습니다!

$(function(){
 var keyStop = {
   8: ":not(input:text, textarea, input:file, input:password)", // stop backspace = back
   13: "input:text, input:password", // stop enter = submit 

   end: null
 };
 $(document).bind("keydown", function(event){
  var selector = keyStop[event.which];

  if(selector !== undefined && $(event.target).is(selector)) {
      event.preventDefault(); //stop event
  }
  return true;
 });
});


답변

제출시 핸들러에서 단순히 false를 리턴하십시오.

<form onsubmit="return false;">

또는 중간에 처리기를 원한다면

<script>
var submitHandler = function() {
  // do stuff
  return false;
}
</script>
<form onsubmit="return submitHandler()">


답변

//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});


답변

폼의 기본 제출 동작을 취소하면이 함수를 호출해야합니다. 모든 입력 필드 또는 이벤트에 첨부 할 수 있습니다.

function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if( keyCode == 13 ) {


    if(!e) var e = window.event;

    e.cancelBubble = true;
    e.returnValue = false;

    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}


답변

ENTER 키는 양식의 기본 제출 버튼 만 활성화합니다.

<input type="submit" />

브라우저는 양식 내에서 찾습니다.

따라서 제출 버튼이 없지만 다음과 같은 것이 있습니다.

<input type="button" value="Submit" onclick="submitform()" /> 

편집 : 의견 토론에 대한 답변 :

텍스트 필드가 하나만 있으면 작동하지 않지만이 경우 원하는 동작 일 수 있습니다.

다른 문제는 양식을 제출하기 위해 Javascript에 의존한다는 것입니다. 접근성의 관점에서 문제가 될 수 있습니다. <input type='button'/>with with javascript 를 작성한 다음 태그 <input type='submit' />안에 넣어서 해결할 수 있습니다 <noscript>. 이 방법의 단점은 자바 스크립트가 비활성화 된 브라우저의 경우 ENTER에 양식을 제출한다는 것입니다. 이 경우 원하는 동작을 결정하는 것은 OP에 달려 있습니다.

나는 자바 스크립트를 전혀 호출하지 않고이 작업을 수행 할 수있는 방법을 모른다.


답변

순수한 자바 스크립트의 짧은 대답은 다음과 같습니다.

<script type="text/javascript">
    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>

입력 유형 = ‘text’에 대한 “Enter”키 누르기 동작 만 비활성화합니다. 방문자는 여전히 웹 사이트 전체에서 “Enter”키를 사용할 수 있습니다.

다른 조치에도 “Enter”를 사용하지 않으려면 console.log (e); 테스트 목적으로 크롬에서 F12 키를 누르고 “콘솔”탭으로 이동하여 페이지에서 “백 스페이스”를 누르고 내부를 살펴보고 어떤 값이 반환되는지 확인한 다음 해당 매개 변수를 모두 타겟팅하여 코드를 더욱 향상시킬 수 있습니다 “e.target.nodeName” , “e.target.type” 등에 대한 귀하의 요구에 적합합니다 .

비슷한 질문에 대한 자세한 답변을 보려면 여기를 클릭하십시오.