2017-10-25 7 views
0

이 문제에 대한 해결책을 2 일 동안 지금까지 찾지 못했지만 지금까지 제시된 해결책 중 어느 것도 효과가 없습니다.VueJS/Semantic UI 입력시 양식 제출 방지

은 내 폼 HTML은 내가 문제의 원인을하려고 노력했지만 그렇게 할 수 없었다

<input v-model="city" type="text" name="quote[city]" id="city"> 

형태로

<form id="quote_form" action="" method="get" class="ui large form"> 

및 입력 텍스트 필드로 정의 . 나는 의미 UI 형태의 키보드 단축키 설정을 해제 시도 :

$('#quote_form').on('keyup keypress', function(e) { 
    var keyCode = e.keyCode || e.which; 
    if (keyCode === 13) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    return false; 
    } 
}); 

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13; 
}); 

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

형태 :

$('.ui.form').form({ 
    keyboardShortcuts: false 
}); 

나는 또한 키 입력 무시하고이 방법으로 기능을 제출 트리거에서 그것을 방지하기 위해 노력했다 각 단계는 버튼을 사용하여 다음 단계로 넘어갈 수 있도록합니다. 엔터를 누르면 폼의 첫 번째 단계/탭으로 리디렉션됩니다. 리디렉션되지 않는 유일한 경우는 현재 단계의 규칙이 충족되지 않는 경우입니다. 양식 제출은 제출 단추에 의해 처리됩니다. 여기서 단추는 양식을 유효성 검증하고 제출하는 메소드를 호출합니다. 입력 제출 동작과 제출 버튼 사이에 어떤 연결도 찾을 수 없습니다. 내가 알려 주시기 바랍니다 후 원인을 파악하는 데 도움 유용한 정보를 잃었 경우

. 여기 질문에 새로 온 사람과 가능한 한 많은 나쁜 것으로 간주되는 내 질문에 방지하기 위해 :) 원하는

+0

당신은 입력에서 키 누름을 방지하기 위해 필요 , 양식에 없습니다. – n00dl3

답변

1

그냥 입력 태그의 끝에 @ keyup.enter.prevent를 사용합니다. 그런데 VueJS Doc

를 참조하십시오, 대신 모든 JQuery와

다음
0

그것을 다시 실행의 기본 VueJS 이벤트를 사용하려고해야 할 것은 당신을위한 솔루션입니다 : @submit.prevent https://jsfiddle.net/4qpffycs/2/