HTML5 자리 표시 자 속성 살펴보기
HTML5에서 가장 좋아하는 새로운 기능 중 하나는 자리 표시 자 텍스트 용이하게. 자리 표시 자 텍스트는 입력 필드에서 찾을 수있는 회색 텍스트로 사용자에게 해당 필드에서 어떤 입력이 필요한지 힌트를 제공합니다. 사용자가 입력 이 텍스트는 사라집니다..
예전에는 일반적으로 이렇게했습니다. 자바 스크립트, 다음과 같이;
이 방법은 아무 문제가 없지만 HTML5에서는 더 쉽습니다..
HTML5에는 논리 이름이있는 새로운 속성이 도입되었습니다. 자리 표시 자. 다음은 그 예입니다.
브라우저에서 볼 때 입력 내용은 아래 그림과 같이 회색 텍스트로 표시됩니다.
언급해야 할 몇 가지 사항 : 사양에 따라 자리 표시 자 속성은에 대한 대안으로 사용되면 안됩니다. 상표 이 속성은 다음 속성에만 적용되어야한다고 제안됩니다. 입력 텍스트가 필요한 유형 (예 :. 본문, 암호, 수색, 이메일, 텍스트 영역 과 전화.
첨가 자리 표시 자 ~로 입력 유형 : 라디오 과 확인란 아무런 변화도 없을 것이다..
자리 표시 자 및 CSS
또한 CSS를 통해 자리 표시 자 텍스트의 스타일을 지정할 수도 있지만이 글을 쓰는 시점에서는 여전히 Firefox 및 Webkit 브라우저 만 사용할 수 있습니다.
다음 예제는 Webkit과 Firefox 모두에서 자리 표시 자 텍스트를 녹색으로 변경하는 방법을 보여줍니다.
input :: - webkit-input-placeholder color : green; 입력 : -moz-placeholder color : green;
그래도 기억하기 만하면 :: - webkit-input-placeholder 과 : -moz-placeholder 텍스트에만 영향을 미치며 병렬로 쓸 수 없습니다..
input :: - webkit-input-placeholder, 입력 : -moz-placeholder color : green;
이 코드 조각은 작동하지 않습니다..
속성 선택자
CSS3는 또한이 속성을 지원하기 위해 [자리 표시 자] 속성 선택자;
입력 [자리 표시 자] 테두리 : 1 픽셀 녹색 점등;
위의 예에서 우리는 입력 그것은 자리 표시 자 속성을 선택하고 테두리를 녹색으로 변경합니다..
브라우저 호환성
이 새로운 HTML5 기능은 당연히 구식 브라우저에서 지원되지 않으며 현재 다음에서 완전히 지원됩니다. Firefox 4 이상, Chrome 4 이상, Safari 5 이상, Opera 11.6 과 Internet Explorer 10 (공식적으로 아직 발표되지 않은).
자리 표시 자 Polyfills
그럼에도 불구하고 이전 브라우저에서 자리 표시자를 표시해야하지만 자리 표시 자 우리는 Polyfills를 사용할 수 있습니다. 많이있다 자리 표시 자 Polyfills 이 예제에서는 PlaceMe.js를 사용하려고합니다.
PlaceMe.js, 위의 코드에서 볼 수 있듯이 jQuery에 의존합니다. 이제 Internet Explorer 9에서 볼 때 모든 입력에 자리 표시 자 텍스트가 표시됩니다..
- 데모보기
- 소스 다운로드
최종 생각
그만큼 HTML5 자리 표시 자 속성을 사용하면 자리 표시 자 텍스트를 쉽게 추가 할 수 있습니다. 이제는 웹 개발자와 디자이너가 자바 스크립트 또는 HTML5 중에서 사용할 메소드를 선택하는 것은 우리의 몫입니다..
Polyfills와 jQuery를 사용하여 오래된 브라우저를 지원하는 것이 불필요하다고 생각한다면 자바 스크립트는 분명히 그 작업에 더 적합 할 것입니다. 하지만 이전 브라우저를 자유롭게 무시할 수 있다면 HTML5 자리 표시자를 사용하는 것이 더 나은 방법 일 것입니다..
