이번에는 HTML에서 프롬프트 효과가 있는 자리 표시자를 구현하는 방법에 대해 JS를 소개하겠습니다. HTML에서 프롬프트 효과가 있는 자리 표시자에 대한 주의 사항은 무엇입니까? z
js를 통해 html의 자리 표시자 속성 효과를 구현하는 방법
이 작업을 수행해야 합니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS实现placeholder属性效果</title> <script> function bl(){ var a=document.getElementById("inpt"); if(a.value.length<=0){ a.style.color="#999999"; a.value="请输入姓名"; } } function fo(){ var a=document.getElementById("inpt"); if(a.value=="请输入姓名"){ a.style.color="black"; a.value=""; } } </script> </head> <body> <input style="color: #999999;" value="请输入姓名" id="inpt" type="text" onblur="bl()" onfocus="fo()" /> </body> </html>
실행 효과는 다음과 같습니다.
추가:
여기는 다음과 같습니다. 모두를 위한 또 다른 jQuery 구현된 자리 표시자 속성 효과의 예:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery实现placeholder属性效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input style="color: #999999;" data-value="请输入姓名" id="inpt" type="text"/> <script> function placeHolder(event){ var self = $(this), selfDataValue = self.attr("data-value"), selfValue = self.val(); if(selfDataValue){ event.type == "click" ? (selfValue == selfDataValue && (self.val("").css("color","#333"))) : (event.type == "blur" && (selfValue == "" && (self.val(selfDataValue).css("color","#A9A9A9")))) }else{ return false; } } $("#inpt").on("click blur",placeHolder); </script> </body> </html>
이 기사의 사례를 읽으신 후 이 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요.
추천 도서:
vue 프로젝트에서 api 인터페이스 사용에 대한 자세한 설명
vue 상위 구성 요소에서 상위 구성 요소로 값을 전달하는 단계에 대한 자세한 설명
위 내용은 JS는 HTML에서 프롬프트 효과가 있는 자리 표시자를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!