相容所有瀏覽器的placeholder效果

螞蟻小編發表於2017-03-16
瀏覽器

html5提供的placeholder屬效能夠在文字框中給出提示語，這一點非常的方便，而不需要我們再用javascript模擬實現了，但是由於低版本的IE瀏覽器的相容性問題，當前還需要進行一下模擬，下面就是一段程式碼例項能夠模擬實現placeholder效果，並全相容各個主流瀏覽器，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.placeholder{
  display:inline-block;
  color:gray;
  vertical-align:top;
  overflow:hidden;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function (){ 
  if($.browser.msie){
    $("input:text,input:password").each(function (){ 
    var $placeholder = $(this).attr("placeholder"); 
    var $width = $(this).css("width"); 
    var $id = $(this).attr("id"); 
    var $height = parseInt($(this).css("height")) + 6 + "px"; 
    var $fontSize = $(this).css("font-size"); 
    var $fontWeight = $(this).css("font-weight"); 
    var $lineHeight = $height; 
    if($(this).css("line-height") != "normal"){ 
      $lineHeight = parseInt($(this).css("line-height")) + 6 + "px"; 
    } 
    if($placeholder != undefined){ 
      $(this).after("<span class=\"placeholder ph_" 
   + $id + "\" style=\"width:" 
   + $width + ";line-height:" 
   + $lineHeight + ";height:" 
   + $height + ";font-weight:" 
   + $fontWeight + ";margin-left:-" 
   + $width + ";font-size:" 
   + $fontSize + "\">" 
   + $placeholder + "</span>"); 
    } 
    $(this).bind("keyup",function(){ 
      if ($(this).val() == "") { 
        $(this).parent().find(".ph_" + $id).css("display", "inline-block"); 
      } 
      else { 
        $(this).parent().find(".ph_" + $id).css("display", "none"); 
      } 
    }); 
  }); 
  } 
  $(".placeholder").live("click",function() { 
    $(this).prev().focus(); 
  }); 
}); 
</script>
</head>
<body id="body">
<input id="n1" type="text" placeholder="螞蟻部落提示" />
</body>
</html>

相關文章