HTML5 자리 표시자(빈 프롬프트) 소개 attribute_html5 튜토리얼 기술

원본 주소: HTML5의 placeholder 속성
데모 주소: placeholder 데모
원본 날짜: 2010년 8월 9일
번역 날짜: 2013년 8월 6일
브라우저에는 많은 HTML5 기능이 도입되었습니다. 일부는 HTML을 기반으로 하고 일부는 JavaScript API 형식이지만 모두 유용합니다. 제가 가장 좋아하는 것 중 하나는 입력 요소에 대한 자리 표시자 속성이 도입된 것입니다.
placeholder 속성은 입력 상자가 입력 포커스를 얻을 때까지 소개 텍스트를 표시합니다. 사용자가 콘텐츠를 입력하면 소개 콘텐츠가 자동으로 숨겨집니다. 이 기술이 JavaScript로 구현된 것을 수천 번 본 적이 있을 것입니다. 그러나 일반적으로 HTML5의 기본 지원이 더 좋습니다.
HTML 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

< input type="text" name="address" placeholder="영구 주소를 입력하세요...">

자리 표시자 속성 필드만 추가하면 됩니다. 일부 안내 텍스트 콘텐츠는 이 효과를 얻기 위해 추가 JavaScript 스크립트가 필요하지 않습니다.
자리 표시자 지원 테스트
(이 글은 2010년 기사입니다. , 현재까지는 2013년에는 모든 주요 브라우저에서 지원해야 합니다.)
placeholder는 새로운 기능이므로 브라우저 지원 테스트가 필요합니다. JS 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

// JS에서 입력 요소를 생성하고 해당 요소에 placeholder라는 속성이 있는지 확인
// 브라우저가 이를 지원하는 경우 이 속성은 js에서 참조되는 DOM에 존재합니다.
function hasPlaceholderSupport() {
var input = document.createElement('input');
return ('placeholder' in input);
}

브라우저가 자리 표시자 기능을 지원하지 않는 경우 MooTools, Dojo 또는 기타 JavaScript 도구와 같이 처리할 하나의 대체 전략이 필요합니다. (이제 Dojo를 덜 사용할 수 있고 중국에서는 jQuery와 ExtJS가 더 일반적으로 사용됩니다.)

코드 복사

코드는 다음과 같습니다.

/* jQuery 코드는 물론 jQuery 라이브러리를 소개하는 것을 잊지 마세요*/
$(function(){
if(!hasPlaceholderSupport()){
// 주소 요소 가져오기
var $address = $("input[name='address']")
placeholder = $address.attr("placeholder")// 포커스 이벤트 바인딩
$address.bind('focus',function(){
if(placeholder == $address.val()){
$address.val('');
}
} );
// 포커스 상실 이벤트
$address.bind('blur',function(){
if('' == $address.val()){
$address.val (자리 표시자);
}
});
}
})

자리 표시자는 js 조각을 대체하기 위한 또 다른 훌륭한 추가 브라우저 속성입니다. HTML5 자리 표시자 스타일을 편집할 수도 있습니다.
전체 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.