聚焦时提示内容变淡,输入文字时提示内容消失的输入框
【HTML】
<div class="input_comm"> <span class="icon_email"></span> <label id="emailPlaceholder" class="placeholder" for="inputEmail">请输入邮箱</label> <input id="inputEmail" class="idx_input" type="text"> </div> <div class="input_comm"> <span class="icon_pwd"></span> <input id="inputPwd" class="idx_input" type="password"> <label id="pwdPlaceholder" class="placeholder" for="inputPwd">请输入邮箱</label> </div>
【JS】
function placeholder(objid,objid2){ var fos = document.getElementById(objid); if(fos.value!=''){ $("#"+objid2).hide(); } fos.onfocus = function(){ $("#"+objid2).addClass("focus"); } fos.onblur = function(){ $("#"+objid2).removeClass("focus"); } var element = document.getElementById(objid); if("\v"=="v"){ element.onpropertychange = webChange; }else{ element.addEventListener("input",webChange,false); } function webChange(){ if(element.value){ $("#"+objid2).hide(); }else if(element.value==""){ $("#"+objid2).show(); } } } if($('#inputEmail')[0]){ placeholder("inputEmail","emailPlaceholder"); } if($('#inputPwd')[0]){ placeholder("inputPwd","pwdPlaceholder"); }