Internet Explorer에서 html5 input placeholder 사용하기

HTML <input type="text" /> placeholder 속성을 사용하여 입력 필드에 원하는 문구를 미리 채워 넣을 수 있습니다.

예:

<form action="demo_form.asp">
<input type="text" name="fname" placeholder="이름"><br>
<input type="text" name="lname" placeholder="성"><br>
<input type="submit" value="제출">
</form>

위의 코드를 사용하면 다음과 같이 각 필드에 placeholder의 속성이 적용되어 미리 채워집니다.

이 기능은 Internet Explorer 9 이후 버전에서만 사용이 가능하다고 명시되어 있지만, 실제로 해 보니 Internet Explorer 11에서도 제대로 적용되지 않는 것 같습니다. 모든 브라우저에서 placeholder 속성을 사용하려면 이 페이지에 나와 있는 jQuery를 사용하면 됩니다. jquery.html5-placeholder-shim.js 파일을 enqueue시키니 워드프레스에서도 잘 작동하네요. 이 방법 이외에도 다음 글에 나와 있는 방법을 사용하여 입력 필드에 미리 채워 넣기가 가능합니다.

• 폼 필드 미리 채우기 jQuery