占位符值在 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>

我在关闭正文标签之前添加了输入：

<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 文件复制到我的本地环境时，我得到了一个非常奇怪的 URL 占位符 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

尝试复制这个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

使用 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><br>

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

占位符值在 IE8 中不起作用

Placeholder value didn't work in IE8

html

javascript

css

jquery

internet-explorer-8