Rumah  >  Artikel  >  hujung hadapan web  >  jQuery kaedah mudah untuk mencapai kesan teks gesaan kelabu dalam kotak teks input_jquery

jQuery kaedah mudah untuk mencapai kesan teks gesaan kelabu dalam kotak teks input_jquery

WBOY
WBOYasal
2016-05-16 15:28:101548semak imbas

Contoh dalam artikel ini menerangkan cara jQuery hanya melaksanakan kesan teks gesaan kelabu dalam kotak teks input. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

$(function(){  
  $(".grayTips").each(function(){ //遍历每个文本框
    var objTextBox=$(this);
    var oldText=$.trim(objTextBox.val());
    objTextBox.css("color","#888"); 
    objTextBox.focus(function(){
      if(objTextBox.val()!=oldText){
        objTextBox.css("color","#000");
      }
      else{
        objTextBox.val("").css("color","#888");
      }
    });
    objTextBox.blur(function(){
      if(objTextBox.val()==""){
        objTextBox.val(oldText).css("color","#888");
      }
    });
    objTextBox.keydown(function(){
      objTextBox.css("color","#000");
    });
  });
});

Nota: fail jquery.js perlu diperkenalkan kedua-dua input dan TextBox adalah sah

$(function(){
 $(".grayTip").each(function(){
  var $input=$(this);
  $input.css("color","#888");
  var oldText=$.trim($input.val());
  $input.focus(function(){
  var newText=$.trim($input.val());
  if (newText==oldText){
   $input.val("");   
  }
  $input.css("color","#000");
  });
  $input.blur(function(){
  var newText=$.trim($input.val());
  if(newText==""){
   $input.val(oldText);
   $input.css("color","#888");
  }
  });
 }); 
});

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan:
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