HTML5에서 자리 표시자 속성을 사용하는 예 및 디스플레이 effect_html5 튜토리얼 기술을 아름답게 만드는 방법

placeholder 속성을 사용하면 텍스트 상자에 프롬프트 정보를 표시할 수 있습니다. 텍스트 상자에 정보를 입력하면 프롬프트 정보가 숨겨집니다. 이전에도 이 효과를 수없이 보셨겠지만 대부분은 JavaScript로 구현되었지만 이제는 HTML5가 기본 지원을 제공하며 그 효과는 더욱 좋습니다!

HTML 코드

코드 복사

코드는 다음과 같습니다.

< ;input type="text" name="first_name" placeholder="Your name..." />

또한 해야 할 일은 선언에 자리 표시자 속성을 추가하는 것뿐이라는 것을 확인했습니다. 텍스트 상자의 태그입니다. 이 효과를 생성하는 데 JavaScript가 전혀 필요하지 않습니다.

브라우저가 자리 표시자 속성을 지원하는지 확인하세요

자리 표시자는 새로운 속성이므로 브라우저가 이를 지원하는지 확인해야 합니다. 예를 들어 IE6 ​​및 IE8은 확실히 지원하지 않습니다.

코드 복사

코드는 다음과 같습니다.

function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

사용자의 브라우저가 자리 표시자 기능을 지원하지 않는 경우 MooTools, Dojo 또는 기타 JavaScript 도구를 사용하여 이를 구현해야 합니다.

코드 복사

코드는 다음과 같습니다.

/* mootools ftw */
var firstNameBox = $('first_name'),
message = firstNameBox.get('placeholder');
firstNameBox.addEvents({
focus: function() {
if(firstNameBox.value = = 메시지) { searchBox.value = ''; }
},
흐림: function() {
if(firstNameBox.value == '') { searchBox.value = 메시지 }
}
})

CSS로 자리 표시자 아름답게 만들기

추가 조사 중에 또 다른 흥미로운 CSS 기능을 발견했습니다. CSS는 INPUT 자리 표시자 효과를 아름답게 합니다. 간단한 CSS 코드를 사용하여 텍스트 상자의 자리 표시자 텍스트를 아름답게 만들어 보겠습니다.

CSS 코드

Firefox에서의 사용법은 Google Chrome에서의 사용법과 다릅니다. 이름은 이해하기 쉽습니다.

코드 복사

코드는 다음과 같습니다.

/ * 모두 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00 } /* firefox 19 */
:-ms -input-placeholder { color:#f00; } /* 즉 */
input:-moz-placeholder { color:#f00; }
/* 개별: 웹킷 */
#field2 ::- webkit-input-placeholder { 색상:#00f; }
#field3::-webkit-input-placeholder { 색상:#090; text-transform:uppercase }
#field4; ::- webkit-input-placeholder { 글꼴 스타일: 기울임꼴; 문자 간격:3px; }
/* 개별: mozilla */
#field2:: -moz- placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; text-transform:uppercase }
#field4::-moz-placeholder; { 글꼴 스타일: 기울임꼴; 문자 간격:3px }

자리 표시자 텍스트의 글꼴, 색상, 스타일을 제어할 수 있습니다. 텍스트 상자 자리 표시자에 애니메이션을 적용할 수도 있습니다. 텍스트 상자를 아름답게 만드는 것은 작은 일처럼 보일 수 있지만 일부 대화형 웹사이트의 경우 성공의 열쇠는 세부 사항에 있습니다. 이제 IE10은 자리 표시자만 지원합니다. 점점 더 많은 사람들이 이 기본 자리 표시자 효과를 사용할 것이라고 생각합니다.