작업이없는 양식 및 enter가 페이지를 다시로드하지 않는 경우
제출 버튼이없는 HTML 양식을 만드는 가장 좋은 방법을 찾고 있습니다. 그 자체로는 충분히 쉽지만, 제출과 같은 작업이 완료 될 때 (예 Enter: 텍스트 필드에 입력) 양식이 자체적으로 다시로드되는 것을 중지해야합니다 .
onsubmit 핸들러를 양식에 추가하고 (일반 js 또는 jquery $ (). submit (fn)을 통해) 특정 조건이 충족되지 않으면 false를 반환합니다.
양식 제출을 원하지 않는 경우가 아니면 양식 요소에서 'action'속성을 생략하지 않는 이유는 무엇입니까?
action="javascript:void(0);"
페이지 다시로드를 방지하고 HTML 표준을 유지하기 위해 양식 에 포함 할 수 있습니다.
이 이벤트를 텍스트 필드에 추가하기 만하면됩니다. Enter 키를 눌러 제출할 수 없으며 필요에 따라 제출 버튼을 추가하거나 form.submit ()을 호출 할 수 있습니다.
onKeyPress="if (event.which == 13) return false;"
예를 들면 :
<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>
양식에서 Enter 키를 누르면 양식의 자연스러운 동작이 제출되는 것입니다. 자연스럽지 않은 동작을 중지하려면 jquery를 사용하여 제출 (기본 동작)을 방지해야합니다.
$("#yourFormId").on("submit",function(event){event.preventDefault()})
아이디어:
<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
<input id="pwset" type="text" size="20" name='pwuser'><br><br>
<button type="button" onclick="CheckPassword()">Next</button>
</form>
과
<script type="text/javascript">
$("#pwset").focus();
function CheckPassword()
{
inputtxt = $("#pwset").val();
//and now your code
$("#div1").load("next.php #div2");
return false;
}
</script>
해결하는 두 가지 방법 :
- 폼의 액션 값은 "javascript : void (0);"입니다.
- 제출을 방지하기 위해 양식에 키 누르기 이벤트 리스너를 추가하십시오.
첫 번째 응답은 최상의 솔루션입니다.
onsubmit 핸들러를 양식에 추가하고 (일반 js 또는 jquery $ (). submit (fn)을 통해) 특정 조건이 충족되지 않으면 false를 반환합니다.
jquery로 더 구체적입니다.
$('#your-form-id').submit(function(){return false;});
양식 제출을 원하지 않는 경우가 아니면 양식 요소에서 'action'속성을 생략하지 않는 이유는 무엇입니까?
Chrome 확장 프로그램 작성은 사용자 입력을위한 양식이 있지만 제출하고 싶지 않은 경우의 예입니다. action = "javascript : void (0);"를 사용하는 경우 코드가 작동 할 수 있지만 인라인 Javascript 실행에 대한 오류가 발생하는 이 문제 가 발생합니다.
작업을 완전히 생략하면 양식이 다시로드되며 Chrome 확장 프로그램을 작성할 때 원하지 않는 경우도 있습니다. 또는 어떤 종류의 내장 계산기가있는 웹 페이지가있는 경우 사용자가 입력을 제공하고 "계산"또는 이와 유사한 것을 클릭합니다.
참고 URL : https://stackoverflow.com/questions/1818249/form-with-no-action-and-where-enter-does-not-reload-page
'program story' 카테고리의 다른 글
406을받는 Spring JSON 요청 (허용되지 않음) (0) | 2020.10.04 |
---|---|
AngularJS 앱의 다이제스트 사이클 성능을 어떻게 측정합니까? (0) | 2020.10.04 |
Angular.module 축소 버그 (0) | 2020.10.04 |
아이폰 UITableView. (0) | 2020.10.04 |
치명적인 오류 : 134217728 바이트의 허용 메모리 크기가 소진되었습니다 (CodeIgniter + XML-RPC). (0) | 2020.10.03 |