HTML5에 추가된 INPUT 태그 속성 지원 여부 확인하기

크롬과 파이어폭스는 input 태그가 placeholder 속성을 지원합니다. 예를 들어, 다음과 같이 HTML을 작성하면

<input name="email" type="text" placeholder="이메일">

결과물은 다음과 같습니다.

그러나 IE는 9까지는 placeholder 속성을 지원하지 않습니다.

IE는 10부터 placeholder 속성을 지원합니다.

placeholder 속성을 지원하지 않는 웹 브라우저에서는 자바스크립트로 비슷한 처리를 할 수 있습니다. 그래서 먼저 이를 웹 브라우저가 지원하는지를 확인해야 합니다. 이 때 사용할 수 있는 방법은 다음과 같습니다.

var nativePlaceholderSupport = (function() {
    var i = document.createElement("input");
    return ("placeholder" in i);
})();

placeholder 속성 뿐만 아니라 HTML5에 추가된 다른 속성 지원 여부도 비슷한 방식으로 확인할 수 있습니다. 다음 코드는 Modernizr 라이브러리의 일부입니다.

var Modernizr = {};
var inputElem = document.createElement("input"), attrs = {};    
Modernizr.input = (function(props) {
    for (var i = 0, len = props.length; i < len; i++) {
        attrs[props[i]] = props[i] in inputElem;
    }
    return attrs;
})("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));


if (!Modernizr.input.placeholder) {
    // Do something.
}

참고 자료