메뉴 보이기
Profile
이온디

2015.08.31

form

[javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준)

조회 수 7164 추천 수 0
URL http://codepen.io/eond/pen/epYpMw 
Code <!DOCTYPE html>
<html>
<body>

<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>

<form id="myForm">
ID: <input type="text" name="fname" id="myID"><br>
PW: <input type="text" name="lname" id="myPW"><br><br>
<input type="button" onclick="myFunction('myForm')" value="Reset form">
<input type="button" onclick="inputReset('myID')" value="Reset ID">
<button type="button" onclick="inputReset('myPW')">Reset PW</button>
</form>

<script>
function myFunction(id) {
document.getElementById(id).reset();
}
function inputReset(id) {
var input = document.getElementById(id);
input.value = "";
}
</script>

</body>
</html> 

자바스크립트 reset() 함수
http://www.w3schools.com/jsref/met_form_reset.asp

reset() 함수는 form 에서만 사용 가능하기 때문에 각 input 당 초기화를 해주기 위해서는 input의 value 값을 null로 입력할 수 밖에 없습니다.

input.value = "";
input.value = null ;
input.value = false ;

은 동일합니다.

 

인풋 값 초기화하기

document.getElementById(id).value = null;

혹은

var input = document.getElementById(id);
input.value = null;

이렇게 인풋값에 null(아무것도 입력하지 않음)값을 넣어줌으로써 인풋값을 초기화시켜줄 수 있습니다.

 

포커스 지정

document.getElementById(id).focus();

이렇게 작성하면 해당 아이디를 가진 input에 포커스를 지정해줍니다.

var input = document.getElementById(id);
input.value = null;
input.focus;

라고도 할 수 있습니다.

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

Profile
에디터
번호 제목 글쓴이 날짜 조회 수
공지 [팁] 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) profile 이온디 2015.08.27 402
공지 자바스크립트 추천 사이트 1 profile 이온디 2015.08.06 318
54 [고급팁] Asynch JS: The Power Of $.Deferred profile 이온디 2016.06.10 33
53 [고급팁] 비동기 프로그래밍을 위한 Promise와 Deferred 알아보기 (고재도) profile 이온디 2016.06.10 74
52 [차트] 대시보드를 위한 오픈소스(Open Source) 차트(Chart) 라이브러리 profile 이온디 2016.06.02 3563
51 [차트] 접근성을 고려한 차트 라이브러리, Nwagon profile 이온디 2016.06.02 250
50 [라이브러리] 모바일 터치 제스츄어 profile 이온디 2016.02.22 40
49 [기초] 자바스크립트 페이지이동 profile 이온디 2015.08.31 378
48 [iframe] 금융투자협회 아이프레임 적용 소스 profile 이온디 2016.01.16 0
47 [iframe] iframe 높이 재설정(크롬 지원, IE 미지원) profile 이온디 2016.01.06 384
46 [차트] echarts profile 이온디 2015.12.21 355
45 [차트] amcharts profile 이온디 2015.12.18 222
44 [팁] 웹사이트 콘텐츠 복사 제한하기 profile 이온디 2015.09.15 81
43 [팁] 끊김없이 흐르는 배너(2009. 10. 12) profile 이온디 2015.09.13 204
42 [팁] 자바스크립트 성능 향상 팁 profile 이온디 2015.09.04 54
[form] [javascript] input reset / 자바스크립트 인풋 초기화(리셋)하는 방법 및 포커스 지정하기(ID 기준) profile 이온디 2015.08.31 7164
40 [form] [Javascript] 인풋값 체크 후 포커스 지정(name 기준) profile 이온디 2015.08.31 60
39 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) profile 이온디 2015.08.28 74
38 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) profile 이온디 2015.08.28 85
37 [문제] onMouseout과 setTimeout 사용법 profile 이온디 2015.08.28 90
36 [고급팁] 자바스크립트 this profile 이온디 2015.08.26 209