IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있습니다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성입니다.

placeholder를 이용한 간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML Attribute | placeholder</title>
    <style>
      input, textarea {
        padding: 10px;
        font-family: Georgia;
        width: 100%;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <p><input type="text" placeholder="Name"></p>
    <p><input type="password" placeholder="Password"></p>
    <p><textarea placeholder="Write Some Text." rows="5"></textarea></p>
  </body>
</html>

그런데 문제가 있습니다. IE9 이전 버전에서는 지원하지 않는다는 것입니다. 다음과 같이 공백으로 나옵니다.

IE8과 IE9는 아직도 많이 사용하는 웹브라우저이므로, 이처럼 빈칸으로 나오면 placeholder를 사용할 수 없습니다. 하지만, 이를 해결해주는 스크립트를 이용해서 해결할 수 있습니다.

두가지 스크립트가 있는데, URL은 다음과 같습니다.

첫번째 스크립트는 jQuery 기반이고, 두번째 스크립트는 단독으로 사용할 수 있습니다. 좀 더 간편한 Placeholders.js로 테스트해보겠습니다.

http://jamesallardice.github.io/Placeholders.js/에서 placeholders.min.js를 다운로드 받습니다. 그리고 HTML 문서에 연결시킵니다.

<script src="placeholders.min.js"></script>

끝입니다. 너무 간단하죠? IE9에서의 결과는 다음과 같습니다.

IE8에서의 결과는 다음과 같습니다.

안타깝게도 password 타입의 input은 제대로 나오지 않네요. 그나마 비밀번호라는 것을 알 정도로는 나옵니다.

Related Posts

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

카페24 쇼핑몰은 자체적으로 디자인 편집기를 제공합니다. 미리보기도 가능하고, 코드 하이라이트도 되는 편집기이기는 하지만, 전문 텍스트 에디터가 아니어서 불편한 점도 있습니다. 만약 에디트플러스를 사용한다면, 카페24에서 제공하는 플러그인을 이용하여 에디트플러스에서 코딩 작업을 할 수 있습니다. 에디트플러스 4 카페24의 플러그인이 지원하는 에디트플러스 버전은 4, 32비트입니다. 최신 버전은 5인데, 5에서는 플러그인을 사용할 수 없습니다. 에디트플러스 4는 ...

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있습니다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성입니다. placeholder를 이용한 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux

드림위버 / 실행 시 이전 작업 파일 열지 않게 하는 방법

드림위버 / 실행 시 이전 작업 파일 열지 않게 하는 방법

드림위버로 A라는 파일을 작업하다가 드림위버를 종료합니다. 그리고 다시 드림위버를 실행하면 A 파일이 자동으로 열립니다. 즉, 파일들을 닫지 않은 채 드림위버를 종료하면, 다시 실행 시 그 파일들이 열리는데요… 이 기능이 좋은 점도 있지만, 경우에 따라서는 불편할 수도 있습니다. 만약 드림위버를 실행할 때 아무 파일도 자동으로 열리지 않게 하고 싶다면… 상단 메뉴에서 을 클릭하세요. [환경 ...

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

Lighthouse로 사이트 속도 측정과 개선 사항 확인하는 방법

사이트 속도와 관련된 문제를 파악할 때 PageSpeed Insights를 많이 이용합니다. 약간 귀찮은 점은 속도 측정을 위해서 PageSpeed Insights에 접속하고 URL을 붙여 넣여야 한다는 것입니다. 만약 많이 불편하다면 Lighthouse를 사용해보세요. 크롬 확장 기능으로 추가하여 원하는 페이지를 바로바로 검사할 수 있습니다. Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 ...

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench / Windows 10에 설치하는 방법

MySQL Workbench는 MySQL 데이터베이스를 관리하고 분석할 때 유용한 도구입니다. 호환성 문제가 있다고 하지만, MariaDB로 관리 가능합니다. MySQL Workbench를 Windows 10에 다운로드하고 설치하는 방법을 정리합니다. 다운로드 https://www.mysql.com/products/workbench/에서 다운로드 합니다. 는 MySQL을 다운로드 하는 것이니, 혼동하지 마세요. 로그인하라고 하는데, 굳이 그러고 싶지 않다면 를 클릭합니다. 바로 ...

Brackets / 실시간 미리보기 사용하는 방법

Brackets / 실시간 미리보기 사용하는 방법

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버에서 403 페이지, 404 페이지 만드는 방법

아파치(Apache) 웹서버를 사용하고 있습니다. 열람 권한이 없는 접속이 있으면 404 에러가, 페이지가 없으면 404 에러가 납니다. 그런데 그 페이지는 아주 단순하고 보기 좋지 않습니다. 예를 들어 403 페이지는 다음처럼 생겼습니다. 만약 모양이 마음에 들지 않는다면, 직접 에러 페이지를 만들 수 있습니다. 적당한 곳에 원하는 디자인과 내용을 가진 페이지를 만듭니다. 다음의 내용으로 ...

SVG 이미지 파일 만드는 방법

SVG 이미지 파일 만드는 방법

SVG는 Scalable Vector Graphics의 약자로, XML 기반의 벡터 이미지입니다. 벡터 방식이므로 이미지를 축소하거나 확대를 해도 깨지지 않는다는 장점이 있습니다. SVG 이미지 파일을 만드는 방법 중 하나는, 벡터 그래픽 제작 프로그램으로 이미지를 만든 후 SVG 형식으로 저장하는 것입니다. 대표적인 벡터 그래픽 제작 프로그램에는 Adobe Illustrator와 Inkscape가 있습니다. Illustrator는 워낙 유명한 제품이라 다 아실 ...