javascript - 占位符在 IE10 中不起作用

Question

html:

<div class="div-input">
    <input type="text" id="loginname" name="username" value="" maxlength="25" 
        class="form-input" placeholder="Username"
    />
</div>
<div class="div-input">
    <input type="password" id="loginpassword" name="password" maxlength="25" 
        class="form-input" placeholder="Password"
    />
</div>
<div>
    <input type="submit" name="login" value="LOGIN" class="form-button" 
        onclick="return check_login(&quot;/&quot;)" 
    />
    <span id="logInfo"></span><span style="display: none;" id="overlay"></span>
    <span style="display: none;" id="popup">
        <img src="/public/images/loading.gif" />
    </span>
</div>

我的问题是占位符在所有浏览器中都可以正常工作，对于 IE8 和 IE9 我使用 Javascript 来解决它，但在 IE10 中占位符可以工作，但方式不正确。

1. 在页面加载时发生的情况是，如果 Placeholder 是占位符，我在 IE10 中只会得到 Placeholde 作为占位符(最后一个字母消失)，但是如果我单击输入框，在页面外它显示正确的占位符为 Placeholder。

2. 如果我在输入字段中键入任何单词，我会在输入字段的 Angular 上看到一个十字符号(关闭符号)，这仅在 IE10 中出现。

Answer 1

听起来您的 javascript 正在破坏 native IE10 占位符功能。

要对此进行测试并希望修复它，请将您为占位符编写的 javascript 包装在条件语句中，以便它仅适用于 IE9 及以下版本。

<!--[if lt IE 9]>
<script>
  document.createElement('header');
  document.createElement('nav');
</script>
<![endif]-->

或者，Mathias Bynens 有一个非常好的 jquery 插件，它是免费的，可以为您处理所有这些:https://github.com/mathiasbynens/jquery-placeholder

一些 CMS 已经有一个使用此代码构建的插件。 Wordpress 插件在这里:http://wordpress.org/plugins/html5-placeholder-polyfill/