0

ファンシー入力ボックスがあります

<input id="search" type="text" placeholder="Enter your name" class="search" name="q"/>

.search {
    font-family: arial;
    height: 32px;
    width:100%;
    min-width:100px;
    font-size: 14px;
    background-image: url('/image/myimage.png');
    background-size: 100% 100%;
    background-repeat:no-repeat;    
}

IE8以下を除く他のすべてのブラウザで正常に動作しているため、画像を引き伸ばすためにこれを行う必要がありました.

<!--[if lte IE 8]>              
    <style type="text/css">
        #search{
                 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/myimage.png', sizingMethod='scale');
                -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image/myimage.png', sizingMethod='scale')";
        }
    </style>
<![endif]-->

検索ボックスにプレースホルダー テキストが必要だったので、プレースホルダーは IE 7 および 8 ではサポートされていないため、 Placeholder.jsファイルを使用しました。

問題は、IE 8 または 7 で入力ボックスをクリックすると、入力ボックスが選択されないことです。プレースホルダーのテキストが消えていないためです。削除するとプレースホルダーが正常に機能するため、alphaimageloader が問題だと思います。誰でもこれについて私にアドバイスできますか？

4

1 に答える 1

0

これを試して

ライブデモ

var placeHolderSupport = document.createElement('input').placeholder != undefined;

$(function() {
  if (!placeHolderSupport) {
    $search=$("#search");
    var ph = $("#search").attr("placeholder");
    if ($search.val()==="") {
      $search.val(ph);
      $search.prop("defaultValue",ph);
    }
    $search.on("focus",function() {
      if (this.value===this.defaultValue) this.value=""; 
    })
    .on("blur",function() {
      if (this.value==="") this.value=this.defaultValue; 
    })
  }
});
于 2013-08-01T08:51:09.613 に答える