jQuery는 HTML5 자리표시자 효과를 구현합니다. example_jquery

HTML5의 새로운 자리표시자 속성을 아셔야겠죠? 모르셔도 상관없습니다. 입력 상자에 기본 텍스트가 있는 경우 이러한 효과가 필요한 경우가 많습니다. 기본 텍스트를 사라지게 하고 포커스를 잃은 후 기본 텍스트를 나타나게 하려면 클릭하세요.

오늘 저는 자리표시자 효과를 시뮬레이션하기 위한 jQuery 코드 조각을 공유합니다.

자바스크립트 코드:

코드 복사 코드는 다음과 같습니다.

함수 placeHolder(이벤트){
var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val();
if(selfDataValue){
event.type == "클릭" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9"))))
}그밖에{
거짓을 반환합니다.
}
}
$(".pInputText").on("흐림 클릭",placeHolder);

HTML 코드:

코드 복사 코드는 다음과 같습니다.

HTML5가 이런 기능을 제공하는데 왜 JS를 작성하느냐고 묻는 분들도 있을 것입니다.

이건 말도 안되는 소리 아닌가요? 물론 호환성 문제입니다. IE가 HTML5와 더 잘 호환된다면 누가 이것을 구현하기 위해 기꺼이 js를 사용하겠습니까?