Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- Oracle
- monitorjbl
- js 전자서명
- opcpackage
- 전자서명개발
- MSsql
- PostgreSQL
- xssfworkbook
- mysql
- poi 대용량
- outofmemoryerror 방지
- 달력기능개발
- spring annotation
- xcode swift memo
- swift 계산기
- Swift
- fullcalendar js
- jxls 엑셀
- ios app 개발
- xcode12.5.1
- js달력
- jxls
- monitorjbl 엑셀
- Xcode
- 대용량엑셀업로드
- poi monitorjbl
- swift 메모장 만들기
- xssreader
- 전자서명기능구현
- xlsx-streamer
Archives
- Today
- Total
web developer👩🏻💻
[JavaScript] input Box 자동 submit 막는 방법 3가지 본문
728x90
input Box가 하나이고, 값을 입력 후 enter키를 누르면 submit이 돼버리는 현상이 생겼다.
이 문제를 해결하기 위한 방법 3가지를 적어보려고 한다.
1. input Box를 하나더 생성한다. style로 숨기기.
<form id="searchForm" name="searchForm">
<input type="text" title="검색어 입력" id="search01" name="search01" value="">
</form>
원래의 소스에 style display:none인 input을 추가해준다. * type은 text *
display:none - 아예 사라지게 하는 것. 보이지도 않고 해당 공간도 존재하지 X
visibility:hidden - 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재
<form id="searchForm" name="searchForm">
<input type="text" title="검색어 입력" id="search01" name="search01" value="">
<input type="text" style="display:none">
</form>
2. keycode값을 판단해서 처리해준다. (추천)
preventDefault : 브라우저 고유의 동작을 중단
stopPropagation : 부모 엘리먼트에게 이벤트 전달을 중단
document.폼name.addEventListener("keydown", evt => {
if (evt.code === "Enter")
evt.preventDefault();
});
3. form 태그의 속성값으로 막아주기.
<form onsubmit="return false"></form>
input 요소에 enter키 눌렀을 때 원치않는 submit 막기
예를 들어 input 요소에 값을 입력하고 enter키를 누르면 submit이 되는데, 값을 입력하지 않고도 enter키를 누르면 원치않는 submit이 되는 현상이 발생한다. 해결책은 Javascript로 이벤트를 무효화해주
selosele.github.io
[JS] event.preventDefault() 간단 설명 😊/ preventDefault란?
preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태
programming119.tistory.com
'js' 카테고리의 다른 글
[JavaScript] div setTimeout display block/none (0) | 2021.11.12 |
---|---|
[jQuery] enter Event 처리하기 keyCode / key (0) | 2021.11.04 |
[jQuery] 파일 업로드 input type = 'file' 다중으로 생성하기 (2) | 2021.10.26 |
[jQuery] 동적 추가된 append에 click event 처리 (0) | 2021.10.26 |
[AJAX] 다중 fileupload / formData 이용하여 JSON 파라미터 넘기기 & 파일업로드 구현 (1) | 2021.10.22 |