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" 등에 대한 귀하의 요구에 적합합니다 .
비슷한 질문에 대한 자세한 답변을 보려면 여기를 클릭하십시오.
이 주제, 여기 또는 다른 게시물에서 찾은 모든 답변에는 한 가지 단점이 있으며 이는 양식 요소의 실제 변경 트리거를 방지합니다. 따라서 이러한 솔루션을 실행하면 onchange 이벤트도 트리거되지 않습니다. 이 문제를 극복하기 위해 이러한 코드를 수정하고 다음 코드를 직접 개발했습니다. 나는 이것이 다른 사람들에게 유용하기를 바랍니다. "prevent_auto_submit"형식의 클래스를 제공하고 다음 JavaScript를 추가했습니다.
$(document).ready(function()
{
$('form.prevent_auto_submit input,form.prevent_auto_submit select').keypress(function(event)
{
if (event.keyCode == 13)
{
event.preventDefault();
$(this).trigger("change");
}
});
});
나는 항상 과거에 위와 같은 키 누르기 핸들러로 그것을 해왔지만 오늘은 더 간단한 해결책을 강타했습니다. Enter 키는 양식에서 사용 불가능한 첫 번째 제출 단추를 트리거하므로 실제로 필요한 것은 제출하려는 단추를 가로채는 것입니다.
<form>
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
<!-- rest of your form markup -->
</form>
그게 다야. 키 누르기는 브라우저 / 필드 / 등에서 평소와 같이 처리됩니다. 입력 제출 논리가 트리거되면 브라우저는 숨겨진 제출 단추를 찾아서 트리거합니다. 그러면 자바 스크립트 핸들러는 서브 미션을 방지합니다.
IE8,9,10, Opera 9+, Firefox 23, Safari (PC) 및 Safari (MAC) 용 크로스 브라우저를 만드는 데 시간을 보냈습니다.
JSFiddle 예 : http://jsfiddle.net/greatbigmassive/ZyeHe/
기본 코드-양식에 첨부 된 "onkeypress"를 통해이 함수를 호출하고 "window.event"를 전달하십시오.
function stopEnterSubmitting(e) {
if (e.keyCode == 13) {
var src = e.srcElement || e.target;
if (src.tagName.toLowerCase() != "textarea") {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
}
stopSubmitOnEnter (e) {
var eve = e || window.event;
var keycode = eve.keyCode || eve.which || eve.charCode;
if (keycode == 13) {
eve.cancelBubble = true;
eve.returnValue = false;
if (eve.stopPropagation) {
eve.stopPropagation();
eve.preventDefault();
}
return false;
}
}
그런 다음 양식에 :
<form id="foo" onkeypress="stopSubmitOnEnter(e);">
그러나 눈에 잘 띄지 않는 JavaScript를 사용하지 않는 것이 좋습니다.
제 경우에는이 jQuery JavaScript가 문제를 해결했습니다.
jQuery(function() {
jQuery("form.myform").submit(function(event) {
event.preventDefault();
return false;
});
}
"ENTER"를 입력하여 양식을 제출하지 않으면 일부 사용자에게 불편을 줄 수 있습니다. 따라서 아래 절차를 따르면 더 좋습니다.
양식 태그에 'onSubmit'이벤트를 작성하십시오.
<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
....
....
....
</form>
다음과 같이 Javascript 함수를 작성하십시오.
function testSubmit(){
if(jQuery("#formId").valid())
{
return true;
}
return false;
}
(OR)
이유가 무엇이든, Enter 키를 눌렀을 때 양식 제출을 막으려면 다음 함수를 자바 스크립트로 작성할 수 있습니다.
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
감사.
이 태그를 양식에 추가하십시오. onsubmit="return false;"그러면 JavaScript 함수를 사용하여 양식을 제출할 수 있습니다.
누르면 양식을 제출 방지하기 위해 enterA의 textarea또는 input필드에이 요소의 종류가 이벤트를 보낼 것을 찾기 위해 이벤트를 제출 확인.
실시 예 1
HTML
<button type="submit" form="my-form">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.type!=="submit") {
e.preventDefault();
}
});
더 좋은 해결책은 제출 버튼이없고 일반 버튼으로 이벤트를 시작하는 것입니다. 첫 번째 예에서는 2 개의 제출 이벤트가 발생하지만 두 번째 예에서는 1 개의 제출 이벤트 만 발생하기 때문에 더 좋습니다.
실시 예 2
HTML
<button type="button" onclick="$('#my-form').submit();">Submit</button>
<form id="my-form">
...
</form>
jQuery
$(document).on('submit', 'form', function(e) {
if (e.delegateTarget.activeElement.localName!=="button") {
e.preventDefault();
}
});
이보다 더 간단하고 유용합니다. : D
$(document).on('submit', 'form', function(e){
/* on form submit find the trigger */
if( $(e.delegateTarget.activeElement).not('input, textarea').length == 0 ){
/* if the trigger is not between selectors list, return super false */
e.preventDefault();
return false;
}
});
어때요?
<asp:Button ID="button" UseSubmitBehavior="false"/>
Please check this article How to prevent ENTER keypress to submit a web form?
$(“.pc_prevent_submit”).ready(function() {
$(window).keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class=”pc_prevent_submit” action=”” method=”post”>
<input type=”text” name=”username”>
<input type=”password” name=”userpassword”>
<input type=”submit” value=”submit”>
</form>You can trap the keydown on a form in javascript and prevent the even bubbling, I think. ENTER on a webpage basically just submits the form that the currently selected control is placed in.
This link provides a solution that has worked for me in Chrome, FF, and IE9 plus the emulator for IE7 and 8 that comes with IE9's developer tool (F12).
http://webcheatsheet.com/javascript/disable_enter_key.php
Another approach is to append the submit input button to the form only when it is supposed to be submited and replace it by a simple div during the form filling
Simply add this attribute to your FORM tag:
onsubmit="return gbCanSubmit;"
Then, in your SCRIPT tag, add this:
var gbCanSubmit = false;
Then, when you make a button or for any other reason (like in a function) you finally permit a submit, simply flip the global boolean and do a .submit() call, similar to this example:
function submitClick(){
// error handler code goes here and return false if bad data
// okay, proceed...
gbCanSubmit = true;
$('#myform').submit(); // jQuery example
}
I Have come across this myself because I have multiple submit buttons with different 'name' values, so that when submitted they do different things on the same php file. The enter / return button breaks this as those values aren't submitted. So I was thinking, does the enter / return button activate the first submit button in the form? That way you could have a 'vanilla' submit button that is either hidden or has a 'name' value that returns the executing php file back to the page with the form in it. Or else a default (hidden) 'name' value that the keypress activates, and the submit buttons overwrite with their own 'name' values. Just a thought.
How about:
<script>
function isok(e) {
var name = e.explicitOriginalTarget.name;
if (name == "button") {
return true
}
return false;
}
</script>
<form onsubmit="return isok(event);">
<input type="text" name="serial"/>
<input type="submit" name="button" value="Create Thing"/>
</form>
And just name your button right and it will still submit, but text fields i.e. the explicitOriginalTarget when you hit return in one, will not have the right name.
This worked for me.
onkeydown="return !(event.keyCode==13)"
<form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">
</form>
put into javascript external file
(function ($) {
$(window).keydown(function (event) {
if (event.keyCode == 13) {
return false;
}
});
})(jQuery);
or somewhere inside body tag
<script>
$(document).ready(function() {
$(window).keydown(function(event) {
alert(1);
if(event.keyCode == 13) {
return false;
}
});
});
</script>
I had the same problem (forms with tons of text fields and unskilled users).
I solved it in this way:
function chkSubmit() {
if (window.confirm('Do you want to store the data?')) {
return true;
} else {
// some code to focus on a specific field
return false;
}
}
using this in the HTML code:
<form
action="go.php"
method="post"
accept-charset="utf-8"
enctype="multipart/form-data"
onsubmit="return chkSubmit()"
>
In this way the ENTER key works as planned, but a confirmation (a second ENTER tap, usually) is required.
I leave to the readers the quest for a script sending the user in the field where he pressed ENTER if he decide to stay on the form.
참고URL : https://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form
'Programing' 카테고리의 다른 글
| java.lang.Thread.interrupt ()는 무엇을합니까? (0) | 2020.05.10 |
|---|---|
| C에서 평등에 대한 구조체를 어떻게 비교합니까? (0) | 2020.05.10 |
| log (n!) = Θ (n · log (n))입니까? (0) | 2020.05.10 |
| Qt-Designer를 사용한 자동 확장 레이아웃 (0) | 2020.05.10 |
| 이동식 SD 카드의 위치 찾기 (0) | 2020.05.10 |