웹 개발을 하다 보면 사용자에게 직접 텍스트를 입력받아야 하는 경우가 자주 있습니다. 이럴 때 가장 간단하게 활용할 수 있는 것이 바로 프롬프트(prompt) 대화 상자입니다. 프롬프트 대화 상자는 화면에 텍스트 입력창이 포함된 팝업을 띄워 사용자와 상호작용할 수 있게 해주며, 사용자는 입력 필드에 값을 작성한 후 확인(OK) 버튼을 클릭하면 됩니다.
prompt() 메서드의 기본 구조
프롬프트 대화 상자는 JavaScript의 prompt() 메서드를 호출하여 표시합니다. 이 메서드는 두 개의 매개변수를 받습니다.
- 첫 번째 매개변수: 텍스트 상자에 표시할 안내 문구(레이블)
- 두 번째 매개변수: 텍스트 상자에 미리 채워져 있을 기본값(문자열)
반환 값의 차이
프롬프트 대화 상자에는 확인(OK)과 취소(Cancel) 두 개의 버튼이 있습니다. 버튼에 따라 반환되는 값이 달라집니다.
- 사용자가 확인(OK) 버튼을 클릭하면
prompt()메서드는 텍스트 상자에 입력된 값을 문자열로 반환합니다. - 사용자가 취소(Cancel) 버튼을 클릭하면
null을 반환합니다.
따라서 실제 코드에서는 반환 값이 null인지 확인하는 조건문을 함께 사용하면 더 안정적인 로직을 구성할 수 있습니다.
예제 코드
아래 예제를 실행하면 버튼 클릭 시 이름을 입력받는 프롬프트 대화 상자가 나타나고, 입력한 값이 화면에 출력됩니다.
<html>
<head>
<script>
<!--
function getValue(){
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
//-->
</script>
</head>
<body>
<p>Click the following button to see the result: </p>
<form>
<input type="button" value="Click Me" onclick="getValue();" />
</form>
</body>
</html>코드 설명
getValue()함수가 호출되면prompt("Enter your name : ", "your name here")가 실행되어 안내 문구와 기본값이 표시된 입력창이 나타납니다.- 사용자가 입력 후 확인 버튼을 누르면 입력값이
retVal변수에 저장됩니다. document.write()를 통해 "You have entered : " 뒤에 입력받은 값이 출력됩니다.
마무리 및 참고 사항
prompt()는 별도의 HTML 폼 없이 즉석에서 사용자 입력을 받을 수 있는 편리한 방법입니다. 다만 디자인 커스터마이징이 불가능하고 일부 브라우저에서 반복 호출 시 차단될 수 있으므로, 실제 서비스에서는 모달 창이나 커스텀 입력 UI를 함께 고려하는 것이 좋습니다. 간단한 데모, 테스트, 학습용 예제에서는 여전히 유용하게 활용할 수 있습니다.