개발 창고/Web

[Javascript] prompt 사용법

로이제로 2020. 9. 11. 08:48
반응형

 최근에는 디자인적 요소 등이 prompt에 어울리지 않아 커스터마이징 한 팝업창을 많이 쓰는데요. 그래도 코드 한 줄로 입력을 받을 수 있는 이점이 있기 때문에 급하게 또는 가볍게 디자인적인 요소 없이 받고 싶을 때는 prompt라는 명령어를 사용하여 값을 입력받을 수 있습니다.

 

  문법

 

msg = window.prompt(message, default);

 

변수 필수여부 내용
message X 입력창에 보여질 메시지 내용
default X 입력란에 기본적으로 입력되어질 내용

 

일단 이번 소스의 설명은 JSFiddle를 이용해 설명을 드릴까합니다.

 

jsfiddle.net/

 

JSFiddle - Code Playground

 

jsfiddle.net

 

JSFiddle의 Javascript + No-Library (pure JS) 란에 다음과 같이 명령어를 입력하고

 

JSFiddle의 Script 입력란

그다음 상단의 Run 버튼을 클릭하면

JSFiddle 상단의 실행버튼

아래와 같이 입력창이 생성되게 됩니다.

prompt가 실행된 모습

확인을 누르면 입력란에 기입된 내용이 msg에 담기게 될 것이고, 취소를 하게 되면 null값이 반환되게 됩니다.

 

때문에 다음과 같이 소스를 입력하고

msg = prompt("내용을 입력해주세요 :", "기본값입니다.");

if(msg != null){
     // CASE prompt에서 [확인]을 누른경우
     alert(msg);
}else{
     // CASE prompt에서 [취소]을 누른경우
     alert("취소되었습니다.");
}

 

[확인]을 눌러보면

[확인]을 누른경우의 결과값

[취소]를 누른 경우

[취소]를 누른경우의 결과값

위와 같은 결과가 나오게 됩니다.

 

 

반응형