의견 : 브라우저는 많은 HTML5 기능을 소개했습니다. 내가 가장 좋아하는 것 중 하나는 입력 요소에 대한 자리 표시 자 속성을 소개하는 것입니다. 자리 표시 자 속성은 입력 상자가 입력 초점을 얻을 때까지 가이드 텍스트를 표시합니다. 사용자가 컨텐츠를 입력하면 안내서 컨텐츠가 자동으로 숨겨집니다.
원래 주소 : HTML5의 자리 표시 자 속성데모 주소 : 자리 표시 자
원래 날짜 : 2010 년 8 월 9 일
번역 날짜 : 2013 년 8 월 6 일
브라우저에는 많은 HTML5 기능이 소개됩니다. 일부는 HTML을 기반으로하고 일부는 JavaScript API의 형태이지만 모두 매우 유용합니다. 내가 가장 좋아하는 것 중 하나는 입력 요소에 대한 자리 표시 자 속성을 소개하는 것입니다.
자리 표시 자 속성은 입력 상자가 입력 초점을 얻을 때까지 가이드 텍스트를 표시합니다. 사용자가 컨텐츠를 입력하면 안내서 컨텐츠가 자동으로 숨겨집니다. 이 기술이 자바 스크립트로 수천 번 구현 된 것을 보았지만 HTML5의 기본 지원이 일반적으로 더 좋습니다.
HTML 코드는 다음과 같습니다.
<입력 유형 = "텍스트"자리 표시 자 = "영구 주소를 입력하십시오 ...">
자리 표시 자 도메인과 일부 가이드 텍스트 내용을 추가하기 만하면이 효과를 달성하기 위해 추가 JavaScript 스크립트가 필요하지 않습니다. 대단하지 않습니까?
자리 표시 자 지원을 테스트하십시오
(이것은 2010 년의 기사입니다. 지금까지 2013 년까지 주류 브라우저는이를 지원해야합니다.)
자리 표시자는 새로운 기능이므로 브라우저 지원을 테스트해야합니다. JS 코드는 다음과 같습니다.
// JS에서 입력 요소를 작성하고 요소에 자리 표시기라는 속성이 있는지 여부를 결정합니다.
// 브라우저가 지원하면이 속성은 JS에 참조 된 DOM에 존재합니다.
함수 hasplaceboldersUpport () {
var input = document.createElement ( 'input');
반환 (입력의 '자리 표시 자');
}
브라우저가 자리 표시 자 기능을 지원하지 않으면 Mootools, Dojo 또는 기타 JavaScript 도구와 같은 폴백 전략이 필요합니다. (이제 Dojo는 덜 사용될 수 있으며 중국에서는 jQuery와 Extjs입니다.)
/* jQuery 코드는 물론 jQuery 라이브러리를 소개하는 것을 잊지 마십시오*/
$ (function () {
if (! hasplaceholdersUpport ()) {
// 주소 요소를 가져옵니다
var $ address = $ ( "input [name = 'address']");
자리 표시기 = $ address.attr ( "자리 표시 자");
// 포커스 이벤트 바인드
$ address.bind ( 'focus', function () {
if (위장기 == $ $ address.val ()) {
$ address.val ( '');
}
});
// 초점을 잃었습니다
$ address.bind ( 'blur', function () {
if ( ''== $ address.val ()) {
$ address.val (자리 표시 자);
}
});
}
});
자리 표시자는 브라우저가 JS 스 니펫을 교체하기위한 또 다른 훌륭한 추가 부동산이며, 자리 표시 자 스타일의 HTML5를 편집 할 수도 있습니다.
모든 코드는 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> html5 자리 표시 자 속성 데모 </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "original = http : //davidwalsh.name/html5-placeholder">
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<cript>
// JS에서 입력 요소를 작성하고 요소에 자리 표시기라는 속성이 있는지 여부를 결정합니다.
// 브라우저가 지원하면이 속성은 JS에 참조 된 DOM에 존재합니다.
함수 hasplaceboldersUpport () {
var input = document.createElement ( 'input');
반환 (입력의 '자리 표시 자');
}
/* jQuery 코드는 물론 jQuery 라이브러리를 소개하는 것을 잊지 마십시오*/
$ (function () {
if (! hasplaceholdersUpport ()) {
// 주소 요소를 가져옵니다
var $ address = $ ( "input [name = 'address']");
자리 표시기 = $ address.attr ( "자리 표시 자");
// 포커스 이벤트 바인드
$ address.bind ( 'focus', function () {
if (위장기 == $ $ address.val ()) {
$ address.val ( '');
}
});
// 초점을 잃었습니다
$ address.bind ( 'blur', function () {
if ( ''== $ address.val ()) {
$ address.val (자리 표시 자);
}
});
}
});
</스크립트>
</head>
<body>
<div>
<form 메소드 = "post"action = "">
<입력 유형 = "텍스트"자리 표시 자 = "영구 주소를 입력하십시오 ...">
<입력 유형 = "제출"값 = "테스트">
</form>
</div>
</body>
</html>