하위 버전 브라우저에서 HTML5 자리 표시자 새 태그의 비호환 문제에 대한 분석 및 솔루션

하위 버전 브라우저에서 HTML5 자리 표시자 새 태그의 비호환 문제에 대한 분석 및 솔루션 _html5 튜토리얼 기술

WBOY

풀어 주다： 2016-05-16 15:46:02

원래의

1825명이 탐색했습니다.

placeholder 속성은 일반적으로 "placeholder"로 알려진 HTML5의 새로운 속성입니다. 해당 기능은 입력 상자의 기능과 유사하며 포커스를 받으면 기본값이 공백이 됩니다. 기본 텍스트가 표시됩니다. 그런 효과를 만들려면 모든 사람이 js/jquery를 사용해야 한다고 생각합니다. 현재는 Mozilla Firefox 3.7, Apple Safari 4, Google Chrome 4 및 Opera11과 같은 최신 브라우저에서만 지원됩니다.
HTML5에서는 입력에 placeholder 속성이 추가되었습니다. 입력 필드의 예상 값에 대한 힌트 정보(힌트)를 텍스트 형식으로 표시하기 위해 입력에 자리 표시자를 제공합니다. .
예:

코드 복사

코드는 다음과 같습니다.

자리 표시자는 조작이 매우 편리하여 개발 효율성을 높이는 동시에 더 높은 버전의 브라우저에서도 사용자 경험이 매우 좋기 때문에 이 속성을 매우 좋아합니다.
단, IE9 이하의 브라우저에서는 유효하지 않으며 IE10은 placeholder 속성을 지원하여 다른 브라우저와 성능이 일치하지 않습니다
•IE10에서는 마우스 클릭(포커스를 받을 때)하면 자리 표시자 텍스트가 사라집니다
• Firefox/Chrome/Safari 클릭이 사라지지 않는데 키보드로 입력하면 텍스트가 사라집니다
그러면 개발자로서 이 문제를 극복해야 할까요? 현재 인터넷에는 유사한 솔루션이 많이 있으며 구현 아이디어는 대략 두 가지 유형으로 나뉩니다.
1. (방법 1) 입력 값을 표시 텍스트로 사용하고 회색 스타일을 시뮬레이션하고 초점을 맞춥니다. on $("[placeholder]").val ()=="", Blur $("[placeholder]").val(this.defaultValue)
2. 값을 사용하지 말고 추가하세요. 본문에 추가 태그(스팬)를 추가한 다음 절대 위치 지정이 입력을 덮습니다.
여기서 첫 번째 방법을 구현하기 때문에 가치를 점유하고 검증 시 추가 판단이 필요하므로 개인적으로는 두 번째 방법을 사용하는 것을 추천합니다.
먼저 현재 브라우저가 자리 표시자 속성을 지원하는지 확인합니다.

코드를 복사합니다.

코드는 다음과 같습니다. :

function placeholderSupport() {
document.createElement('input')에서 'placeholder'를 반환
}

의 키 코드:

코드 복사

코드는 다음과 같습니다.

/*
*자리 표시자는 ie9 이하와 호환됩니다. 작성자: Gao Fengming add 2016-1-27
*/
$(function(){
if(!placeholderSupport()){ / / 브라우저가 자리 표시자를 지원하는지 확인
$(document).ready(function(){
//기본 순회 루프는 자리 표시자를 추가합니다
$('[placeholder]').each(function(){
$(this).parent().append("" $(this).attr('placeholder') ""); )
$('[ placeholder]').blur(function(){
if($(this).val()!=""){ //현재 값이 비어 있지 않으면 숨깁니다. 자리 표시자
$(this).parent ().find('span.placeholder').hide();
}
else{
$(this).parent().find(' span.placeholder').show();
}
})
})

위 콘텐츠는 하위 버전 브라우저에서 새로운 HTML5 자리 표시자 태그의 비호환성에 대한 분석 및 해결 방법을 소개합니다.