의견 : HTML5에서 많은 흥미로운 새로운 기능이 소개되었습니다. 일부는 HTML에 반영되고 일부는 JavaScript API이며 모두 매우 유용합니다. 내가 가장 좋아하는 기능 중 하나는 텍스트 상자 (입력)의 자리 표시 자 속성입니다.
자리 표시 자 속성을 사용하면 텍스트 상자에 신속한 정보를 표시 할 수 있습니다. 텍스트 상자에 정보를 입력하면 신속한 정보가 숨겨집니다. 이 효과가 셀 수없이 많은 시간을 보았을 수도 있지만 대부분은 JavaScript로 구현되었으며 이제 HTML5는 기본 지원을 제공하며 더 잘 작동합니다!
HTML 코드
또한 텍스트 상자의 선언 레이블에 자리 표시 자 속성을 추가하기 만하면됩니다. 이 효과를 만들기 위해 JavaScript가 전혀 필요하지 않습니다.
브라우저가 자리 표시 자 속성을 지원하는지 확인하십시오
자리 표시자는 새로운 부동산이므로 브라우저가 지원하는지 확인해야합니다. 예를 들어, IE6 및 IE8은 확실히 지원되지 않습니다.
함수 hasplaceboldersUpport () {
var input = document.createElement ( 'input');
반환 (입력의 '자리 표시 자');
}
사용자의 브라우저가 자리 표시 자 기능을 지원하지 않으면 Mootools, Dojo 또는 기타 JavaScript 도구를 사용하여이를 구현해야합니다.
/* mootools ftw! */
var firstNamebox = $ ( 'first_name'),
message = firstNamebox.get ( '자리 표시 자');
FirstNamebox.AdDevents ({
초점 : function () {
if (firstNamebox.Value == Message) {searchBox.Value = ''; }
},
블러 : function () {
if (firstNamebox.Value == '') {SearchBox.Value = Message; }
}
});
CSS로 자리 표시자를 아름답게하십시오
추가 연구에서 나는 또 다른 흥미로운 CSS 기능을 발견했습니다 : CSS는 입력 자리 표시 자 효과를 아름답게했습니다. 간단한 CSS 코드를 사용하여 텍스트 상자의 자리 표시 자 텍스트를 아름답게하겠습니다.
CSS 코드
Firefox 브라우저의 사용량은 Chrome의 사용과 다릅니다. 그들의 이름은 이해하기 쉽습니다.
/* 모두 */
::- WebKit-input-placeholder {color :#f00; }
::-Moz-Placeholder {color :#f00; } / * Firefox 19+ * /
: -ms-input-placeholder {color :#f00; } /* 즉 */
입력 : -Moz-Placeholder {색상 :#f00; }
/ * 개인 : WebKit */
#Field2 :: -WebKit-input-Placeholder {색상 :#00f; }
#Field3 :: -WebKit-input-Placeholder {색상 :#090; 배경 : Lightgreen; 텍스트 변환 : 대문자; }
#Field4 ::- WebKit-input-placeholder {font 스타일 : 이탈리아; 텍스트 결정 : 오버 라인; 문자 스페이스 : 3px; 색상 :#999; }
/ * 개인 : 모질라 */
#Field2 ::- Moz-Placeholder {색상 :#00f; }
#Field3 :: -Moz-Placeholder {색상 :#090; 배경 : Lightgreen; 텍스트 변환 : 대문자; }
#Field4 ::- Moz-Placeholder {font 스타일 : 이탈리아; 텍스트 결정 : 오버 라인; 문자 스페이스 : 3px; 색상 :#999; }
자리 표시 자 텍스트의 글꼴, 색상 및 스타일을 제어 할 수 있습니다. 텍스트 상자의 자리 표시자를 애니메이션 방식으로 표시 할 수도 있습니다. 텍스트 상자를 아름답게하는 것은 작게 보이지만 일부 대화식 웹 사이트의 경우 성공의 열쇠는 세부 사항에 있습니다. 이제 IE10은 자리 표시 자만 지원합니다. 나는 점점 더 많은 사람들 이이 네이티브 자리 표시 자 효과를 사용할 것이라고 생각합니다.