佔位符值在IE8中不起作用

Question

我已經使用html，css和jqueries創建了網頁。

我修復了IE8中的最大問題。儘管如此，我仍在掙扎着佔位符價值。

爲此，我試過了，

我加了下面的腳本在我的腦海標籤：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholde‌​r.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

並且我增加了輸入結束標記之前：

<script>$('input, textarea').placeholder();</script> 

以上這些腳本放置在我的index.html中。

這是header.html中：

<form action="#" method="get" id="search-form" role="search" class="large--right"> 
     <input name="q" type="text" id="search-field" placeholder="Search store..." class="hint"> 
     <button type="submit" value="" name="submit" id="search-submit" class="icon-fallback-text"> 
     <span class="icon icon-search" aria-hidden="true"></span> 
     <span class="fallback-text">Search</span> 
     </button> 
     </form> 

但它沒有工作，我可以知道，這些都是正確。如果沒有，你可以請給我建議。

在此先感謝。

Answer 1

使用THIS插件。

檢查佔位符的演示這裏HERE - >

使用此代碼

<!--[if lte IE 10]> 
     <script type="text/javascript" src="http://linux.aress.net/smudev/js/nwxforms.js"></script>  
     <script type="text/javascript">window.onload = Function('nwxforms(this)');</script> 
    <![endif]--> 

以JS從我的網站。

我建議你從這裏採取JS文件HERE。然後把你的文件夾中，並使用相對路徑，如：

<script type="text/javascript" src="YourjsFolder/nwxforms.js"></script>


Answer 2

當複製您的JS文件到我的本地環境中，我得到了佔位符JS代碼一個非常奇怪的網址：

http://cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholde%C3%A2%E2%82%AC%C5%92%C3%A2%E2%82%AC%E2%80%B9r.min.js 

嘗試複製此網址（它看起來相同，但也有一些奇怪的字符你的）：

//cdnjs.cloudflare.com/ajax/libs/jquery-placeholder/2.0.8/jquery.placeholder.min.js 

Answer 3

Try following plugin 

https://github.com/mathiasbynens/jquery-placeholder

或

或

if($.browser.msie){ 
    $('input[placeholder]').each(function(){ 

     var input = $(this);   

     $(input).val(input.attr('placeholder')); 

     $(input).focus(function(){ 
      if (input.val() == input.attr('placeholder')) { 
       input.val(''); 
      } 
     }); 

     $(input).blur(function(){ 
      if (input.val() == '' || input.val() == input.attr('placeholder')) { 
       input.val(input.attr('placeholder')); 
      } 
     }); 
    }); 
}; 

Its helpful for you 

Answer 4

我不認爲你需要任何jQuery的佔位符這裏插件。

Chrome，Firefox和IE10 +已經支持文本字段的placeholder屬性。

因此，您嘗試佔位符的唯一瀏覽器是IE8和IE9。

獲得像設計佔位符的大部分部分可以使用CSS來完成。然後只是觸發按鍵事件，JavaScript是必需的。

這裏是一個demo

CSS

label { 
    position: absolute; 
    z-index: 0; 
    left: 0px; 
    color: #CCC; 
    top: 0px; 
    padding: 2px; 
} 
.input-wrapper { 
    position: relative; 
    display: inline-block; 
} 

HTML

<form action="#" method="get" id="search-form" role="search" class="large--right"> 
    <div class="input-wrapper"> 
     <input name="q" type="text" id="search-field" class="hint"></input> 
     <label id="label-search-field" for="search-field">Search store...</label> 
    </div> 
    <button type="submit" value="" name="submit" id="search-submit" class="icon-fallback-text"> <span class="icon icon-search" aria-hidden="true"></span> 
<span class="fallback-text">Search</span> 

    </button> 
</form> 

的JavaScript

// Include this function 
function placeholder(e, label) { 
    var e = e || window.event; 
    var el = e.currentTarget || e.srcElement; 
    label.style.color = el.value.length ? "transparent" : ""; 
} 


// call like this in your project 
var text = document.getElementById('search-field'); 
text.onkeyup = function (e) { 
    var label = document.getElementById('label-search-field'); 
    placeholder(e, label); 
}