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>

我在关闭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

尝试复制此网址（它看起来一样，但你的网站上有一些奇怪的字符）：

//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 - ＆gt;

使用此代码

<!--[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。

我建议您从这里HERE获取JS文件。然后放入您的文件夹并使用相对路径，如：

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

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中不起作用

4 个答案: