占位符值在IE8中不起作用

Question

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

我修復了IE8中的最大問題。 我仍然在形式上占位符價值方面掙扎。

為此，我嘗試了

我在head標簽中添加了以下腳本：

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

我在關閉body標簽之前添加了輸入：

<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

將您的JS文件復制到本地環境時，占位符JS代碼的URL確實很奇怪：

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

嘗試復制此URL（看起來相同，但您的URL中有一些奇怪的字符）：

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

Answer 2

Try following plugin

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

要么

http://jamesallardice.github.io/Placeholders.js/

要么

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 3

使用此插件。

在此處檢查占位符演示->

使用此代碼

<!--[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文件的位置 。 然后放入您的文件夾並使用相對路徑，例如：

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


Answer 4

我認為您在這里不需要任何jquery占位符插件。

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

因此，您嘗試使用的唯一瀏覽器是IE8和IE9 。

獲得占位符（如設計）的大部分過程都可以使用CSS完成。 然后僅需觸發javascript事件即可觸發keypress事件。

這是一個演示

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);
}