HTML5 자리표시자 속성에 대한 자세한 설명

이 글에서는 주로 HTML5 자리 표시자 속성 을 자세히 소개합니다. 자리 표시자 속성을 사용하면 관심 있는 친구들이 이를 참조할 수 있습니다.

HTML5는 많은 흥미로운 새로운 기능을 도입합니다. 일부는 HTML에 반영되고 일부는

JavaScript API이며 모두 매우 유용합니다. 제가 가장 좋아하는 기능 중 하나는 텍스트 상자(INPUT)의 자리 표시자 속성입니다. 자리 표시자 속성을 사용하면 텍스트 상자에 프롬프트 정보를 표시할 수 있습니다. 텍스트 상자에 정보를 입력하면 프롬프트 정보가 숨겨집니다. 이전에도 이 효과를 수없이 보셨겠지만 대부분은 JavaScript로 구현되었지만 이제는 HTML5가 기본 지원을 제공하며 그 효과는 더욱 좋습니다!

HTML 코드

<input type="text" name="first_name" placeholder="你的姓名..." />

보시다시피 텍스트 상자의 선언 태그에 자리 표시자 속성을 추가하기만 하면 됩니다. 이 효과를 생성하는 데 JavaScript가 전혀 필요하지 않습니다.

브라우저가 Placeholder 속성을 지원하는지 확인하세요

placeholder는 새로운 속성이기 때문에 IE6처럼 브라우저가 이를 지원하는지 확인이 필요합니다 및 IE8은 확실히 지원되지 않습니다.

JavaScript Code复制内容到剪贴板
function hasPlaceholderSupport() {   
 var input = document.createElement('input');   
 return ('placeholder' in input);   
}

사용자의 브라우저가 자리 표시자 기능을 지원하지 않는 경우 MooTools, Dojo 또는

기타JavaScript 도구를 사용하여 이를 구현해야 합니다.

JavaScript Code复制内容到剪贴板
/* mootools ftw! */  
var firstNameBox = $('first_name'),   
 message = firstNameBox.get('placeholder');   
firstNameBox.addEvents({   
 focus: function() {   
  if(firstNameBox.value == message) { searchBox.value = ''; }   
 },   
 blur: function() {   
  if(firstNameBox.value == '') { searchBox.value = message; }   
 }   
});

CSS를 사용하여 자리 표시자 아름답게 만들기

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

CSS 코드

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

CSS Code复制内容到剪贴板
/* all */  
::-webkit-input-placeholder { color:#f00; }   
::-moz-placeholder { color:#f00; } /* firefox 19+ */  
:-ms-input-placeholder { color:#f00; } /* ie */  
input:-moz-placeholder { color:#f00; }   
  
/* inpidual: webkit */  
#field2::-webkit-input-placeholder { color:#00f; }   
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }   
  
/* inpidual: mozilla */  
#field2::-moz-placeholder { color:#00f; }   
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

자리 표시자 텍스트의 글꼴, 색상, 스타일을 제어할 수 있습니다.

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

위 내용은 HTML5 자리표시자 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!