Rumah > hujung hadapan web > tutorial js > jQuery表单获取和失去焦点输入框提示效果的实例代码_jquery

jQuery表单获取和失去焦点输入框提示效果的实例代码_jquery

WBOY
Lepaskan: 2016-05-16 17:27:22
asal
1093 orang telah melayarinya
复制代码 代码如下:

  $("#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();
  }
  })
  }) 
  })




 

       

聚焦型提示语消失  无效果请刷新


       
       
   

 

     

输入型提示语消失


     
       
   


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan