사용자가 Enter 키를 눌러 양식을 제출하지 못하도록 방지
웹 사이트에 설문 조사가 있는데 사용자가 Enter 키를 누르고 (이유를 모르겠습니다) 실수로 제출 버튼을 클릭하지 않고 설문 조사 (양식)를 제출하는 데 문제가있는 것 같습니다. 이를 방지 할 수있는 방법이 있습니까?
설문 조사에서 HTML, PHP 5.2.9 및 jQuery를 사용하고 있습니다.
다음과 같은 방법을 사용할 수 있습니다.
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
원본 게시물의 댓글을 읽을 때 더 유용하게 만들고 Enter모든 필드를 완료 한 경우 사람들이 누를 수 있도록 합니다.
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;
}
});
});
어디서나 Enter 키를 허용하지 않음
<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이 체크 되면 13 (일반 입력)과 108 (숫자 입력)을 확인합니다.
참고 그 $(window)어떤 다른 답변에서 제안 대신으로 $(document)아니 작업을 수행합니다 keydown/ keyup당신이 아니라 불쌍한 사용자를 포함하는 같이 인 경우에 그래서의 안 좋은 선택, IE <= 8.
텍스트 영역에서만 Enter 키 허용
당신이있는 경우 <textarea>양식에 (이 당연히 해야 다음 아닌 모든 개별 입력 요소에를 keyDown 처리기를 추가, Enter 키를 동의) <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 키에서도 호출하려는 경우 false를 반환하는 대신 이벤트의 기본 동작 만 방지하여 다른 처리기에 제대로 전파 할 수 있습니다.
$(document).on("keydown", ":input:not(textarea)", function(event) {
if (event.key == "Enter") {
event.preventDefault();
}
});
텍스트 영역 및 제출 버튼에서만 Enter 키 허용
제출 버튼 <input|button type="submit">에도 Enter 키를 허용 하려면 항상 아래와 같이 선택기를 세분화 할 수 있습니다.
$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
// ...
});
참고 input[type=text]일부 다른 답변에 제안 그래서의 안 좋은 선택, 그 HTML5의 텍스트가 아닌 입력을 적용되지 않습니다.
양식이 제출되는 것을 방지하기 위해 키 누르기와 관련된 세 가지 이벤트를 모두 잡아야했습니다.
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(); }
});
섹션 4.10.22.2 W3C HTML5 사양의 암시 적 제출 은 다음과 같이 말합니다.
form요소의 기본 버튼은 (가) 첫 번째 단추를 제출 에 나무 위해서는 그 형태 소유자 즉form요소입니다.사용자 에이전트가 사용자가 묵시적으로 양식을 제출할 수 있도록 지원하는 경우 (예를 들어, 일부 플랫폼에서 텍스트 필드에 포커스가있는 동안 "엔터"키를 누르면 묵시적으로 양식을 제출 함) 기본 버튼 에 정의 된 활성화 가있는 양식에 대해 수행 합니다. 동작으로 인해 사용자 에이전트가 해당 기본 단추 에서 합성 클릭 활성화 단계 를 실행 해야 합니다 .
참고 : 결과적으로 기본 단추 가 비활성화 된 경우 이러한 암시 적 제출 메커니즘을 사용할 때 양식이 제출되지 않습니다. ( 비활성화 된 버튼은 활성화 동작 이 없습니다 .)
따라서 양식의 암시 적 제출을 비활성화하는 표준 준수 방법은 비활성화 된 제출 단추를 양식의 첫 번째 제출 단추로 배치하는 것입니다.
<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 사용 여부에 관계없이 암시 적 양식 제출을 방지하려면 표준을 준수하는 웹 브라우저가 필요합니다.
스크립트를 사용하여 실제 제출을 수행하는 경우 다음과 같이 onsubmit 핸들러에 "return false"행을 추가 할 수 있습니다.
<form onsubmit="return false;">
JavaScript에서 양식에 대한 submit ()을 호출하면 이벤트가 트리거되지 않습니다.
사용하다:
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
if(e.keyCode == 13) {
e.preventDefault();
return false;
}
});
이 솔루션은 웹 사이트의 모든 양식 (Ajax로 삽입 된 양식에도 적용)에서 작동하여 Enter입력 텍스트에서 s 만 방지합니다 . 문서 준비 기능에 넣고 평생이 문제를 잊으십시오.
Enter부 자연스럽게 보일 수있는 사용자 가을 누르는 것을 방지하는 대신 양식을 그대로두고 클라이언트 측 유효성 검사를 추가 할 수 있습니다. 설문 조사가 완료되지 않으면 결과가 서버로 전송되지 않고 사용자에게 다음과 같은 멋진 메시지가 표시됩니다. 양식을 작성하기 위해 완료해야 할 사항. jQuery를 사용하는 경우 유효성 검사 플러그인을 사용해보십시오.
http://docs.jquery.com/Plugins/Validation
Enter버튼을 잡는 것보다 더 많은 작업이 필요 하지만 확실히 더 풍부한 사용자 경험을 제공 할 것입니다.
아직 댓글을 달 수 없으므로 새 답변을 게시하겠습니다.
수락 된 대답은 괜찮지 만 숫자 패드 입력시 제출을 중지하지 않았습니다. 최소한 현재 버전의 Chrome에서. 이 키 코드 조건을 변경해야 작동합니다.
if(event.keyCode == 13 || event.keyCode == 169) {...}
멋지고 간단한 jQuery 솔루션 :
$("form").bind("keypress", function (e) {
if (e.keyCode == 13) {
return false;
}
});
목표를 달성하는 것이 나의 해결책이며 깨끗하고 효과적입니다.
$('form').submit(function () {
if ($(document.activeElement).attr('type') == 'submit')
return true;
else return false;
});
완전히 다른 접근 방식 :
<button type="submit">양식 의 첫 번째 는를 누르면 활성화됩니다 Enter.- 버튼이 숨겨져 있어도 마찬가지입니다.
style="display:none; - 해당 버튼의 스크립트
false는를 반환 할 수 있으며 제출 프로세스를 중단합니다. - 다른
<button type=submit>양식을 제출할 수 있습니다 .true제출물을 계단식으로 작성하려면 돌아가십시오 . - Enter실제 제출 버튼이 포커스 된 상태에서 누르면 실제 제출 버튼이 활성화됩니다.
- Enter내부
<textarea>또는 다른 양식 컨트롤을 누르면 정상적으로 작동합니다. - 양식 컨트롤 Enter내부를 누르면
<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>
양식에 '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>
특정 입력 만 제출하는 것을 막아야했기 때문에 클래스 선택기를 사용하여 필요할 때마다 "전역"기능이되도록했습니다.
<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />
그리고이 jQuery 코드 :
$('.idNoEnter').keydown(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
또는 keydown이 충분하지 않은 경우 :
$('.idNoEnter').on('keypress keydown keyup', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
몇 가지 참고 사항 :
여기에서 다양한 좋은 답변을 수정하면 모든 브라우저 에서 Enter키가 작동하는 것 같습니다 keydown. 대안으로 방법을 업데이트 bind()했습니다 on().
저는 모든 장단점 및 성과 토론을 고려하는 클래스 선택 자의 열렬한 팬입니다. 내 명명 규칙은 jQuery가 CSS 스타일과 구분하기 위해 ID로 사용하고 있음을 나타내는 'idSomething'입니다.
- 입력이나 버튼에 type = "submit" 을 사용하지 마십시오 .
- 사용 유형 = "버튼" 사용 JS는 [JQuery와 / 각도 / 기타] 서버에 양식을 제출합니다.
제출 버튼을 넣지 않으면 할 수 있습니다. 입력 (type = button)에 스크립트를 넣거나 양식에 데이터를 제출하려면 eventListener를 추가하십시오.
차라리 이것을 사용하십시오
<input type="button">
이것을 사용하는 것보다
<input type="submit">
Enter키가 적중 되었는지 확인 하고 제출을 중지하기 위해 JavaScript 메서드를 만들 수 있습니다.
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
제출 메소드에서 호출하십시오.
"ajax textfields"(Yii CGridView)가있는 그리드와 하나의 제출 버튼 만있는 비슷한 문제가있었습니다. 텍스트 필드를 검색 할 때마다 제출 된 양식을 입력하십시오. 뷰 (MVC 패턴) 사이의 유일한 공통 버튼이기 때문에 버튼으로 무언가를해야했습니다. 내가해야 할 일은 제거 type="submit"하고 두는 것뿐 이었습니다onclick="document.forms[0].submit()
나는 그것이 모든 대답으로 잘 덮여 있다고 생각하지만 JavaScript 유효성 검사 코드가있는 버튼을 사용하는 경우 Enter에 대한 양식의 onkeypress를 설정하여 예상대로 제출을 호출 할 수 있습니다.
<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">
onkeypress JS는 무엇이든 할 수 있습니다. 더 큰 글로벌 변화가 필요하지 않습니다. 앱을 처음부터 코딩하는 사람이 아니고 다른 사람의 웹 사이트를 뜯어 내고 다시 테스트하지 않고 수정 한 경우 특히 그렇습니다.
BLOCK SUBMIT 만하고 Enter 키의 다른 중요한 기능 (예 <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>여기에 답하지 않은 것 : 페이지의 요소를 Enter탭할 때 제출 버튼에 도달 할 때 누르면 양식에서 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/
이미 여기에 좋은 답변이 많이 있습니다. UX 관점에서 무언가를 기여하고 싶습니다. 양식의 키보드 컨트롤은 매우 중요합니다.
문제는 키 누름시 제출을 비활성화하는 방법 Enter입니다. Enter전체 응용 프로그램에서 무시하는 방법이 아닙니다 . 따라서 창이 아닌 양식 요소에 핸들러를 연결하는 것을 고려하십시오.
Enter양식 제출을 비활성화해도 다음을 허용해야합니다.
Enter제출 버튼에 포커스가있을 때 를 통한 양식 제출 .- 모든 필드가 채워지면 양식 제출.
- 를 통해 제출하지 않은 버튼과의 상호 작용
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;
}
});내 특정한 경우에는 ENTER가 양식 제출을 중지하고 제출 버튼 클릭을 시뮬레이션해야했습니다. 이는 제출 버튼에 클릭 핸들러가 있었기 때문입니다. 우리가 모달 창 (이전 코드 상속) 내에 있었기 때문입니다. 어쨌든 여기 에이 경우에 대한 내 콤보 솔루션이 있습니다.
$('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을 사용하는 사람들에게 특히 유용합니다.
이것은 나를 위해 작동합니다
jQuery.each($("#your_form_id").find('input'), function(){
$(this).bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
});
약간의 CoffeeScript 코드를 추가하고 싶습니다 (현장 테스트되지 않음).
$ ->
$(window).bind 'keypress', (event) ->
if event.keyCode == 13
unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
event.preventDefault()
(Under 절의 멋진 트릭이 마음에 드 셨으면합니다.)
당신의 CSS에 가서 그것을 자동으로 당신이 더 이상을 원하는 당신이 그것을 또는 유형을 삭제할 수있는 경우 입력을 제출하지있을만큼 당신의 포뮬러의 제출을 차단하는 것을 추가 activate하고 deactivate대신
input:disabled {
background: gainsboro;
}
input[value]:disabled {
color: whitesmoke;
}
javascript:void(0)양식 제출을 방지 하는 데 사용할 수도 있습니다 .
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>
<form action="javascript:void(0)" method="post">
<label for="">Search</label>
<input type="text">
<button type="sybmit">Submit</button>
</form>Javascript 사용 (입력 필드를 확인하지 않고) :
<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>
이것은 제 경우에 잘 작동합니다.
이것은 다른 솔루션에 대한 많은 좌절 후에 모든 브라우저에서 저에게 효과적이었습니다. name_space 외부 함수는 전역 선언에서 벗어나는 것입니다.
$(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!');}
);
});
사용하다:
// 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>
In my case I had a couple of jQuery UI autocomplete fields and textareas in a form, so I definitely wanted them to accept Enter. So I removed the type="submit" input from a form and added an anchor <a href="" id="btn">Ok</a> instead. Then I styled it as a button and added the following code:
$( '#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;
});
If a user fills all required fields, validateData() succeeds and the form submits.
참고URL : https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter
'Programing' 카테고리의 다른 글
| virtualenv에서 Python 3 사용 (0) | 2020.09.30 |
|---|---|
| Javadoc의 외부 URL에 연결 하시겠습니까? (0) | 2020.09.30 |
| 탭-공간 변환 계수를 사용자 정의하는 방법은 무엇입니까? (0) | 2020.09.30 |
| 펜촉이 장착되었지만 '보기'콘센트가 설정되지 않았습니다. (0) | 2020.09.30 |
| #! (0) | 2020.09.30 |