텍스트 상자 입력 내용 프롬프트가 사라지도록 하는 두 가지 방법 -javascript 기술

첫 번째 방법:
HTML5 입력 태그의 새로운 기능인 자리 표시자를 기반으로 합니다. 또한 x-webkit-speech 속성은 음성 입력 기능을 구현할 수 있습니다.

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

<입력 유형= "email" name="email" Spellcheck="false" placeholder="email" autofocus tabindex="1" x-webkit-speech>

두 번째 방법 :
span을 사용하여 시뮬레이션, 위치 범위 , JS 키보드 이벤트를 사용하여 입력을 결정하고 범위의 콘텐츠가 표시되는지 또는 숨겨지는지 여부를 결정합니다.

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

.org/1999/xhtml">
< ;head>

<제목>제목 없는 문서

< ;script type="text/javascript">
$(document).ready(function(){
$("#focus .input_txt ").each(function(){
var thisVal= $(this).val();
//텍스트 상자의 값이 비어 있는지 확인합니다. 값이 있으면 프롬프트를 숨깁니다.
if(thisVal! =""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span ").show(); 🎜>}
//포커스 입력 상자 유효성 검사
$(this).focus(function(){
$(this).siblings("span").hide();
}) .blur(function(){
var val=$(this).val();
if(val!=""){
$(this) .siblings("span").hide ();
}else{
$(this).siblings("span").show()
}
})
$("# keydown .input_txt").each(function(){
var thisVal=$(this).val();
//텍스트 상자의 값이 비어 있는지 확인하고, 값이 있으면 프롬프트는 숨겨집니다.
if(thisVal!=""){
$(this).siblings("span").hide(); }else{
$(this).siblings("span").show();
}
$(this).keyup(function(){
var val=$(this) .val( );
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val() ;
if(val!=""){
$(this).siblings("span").hide()
}else{
$(this).siblings("span ").show();
}
})
})
})


>

포커스 프롬프트가 사라집니다

꽃잎 등록 이메일 ;input type="text" class="input_txt border_radius" />
Password

입력 프롬프트가 사라집니다< ;/h2>
꽃잎 등록 이메일
;password

HTML>