聚焦时提示内容变淡,输入文字时提示内容消失的输入框
【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");
}