IE9 HTML5 占位符 - 人们是如何实现这一目标的？

Posted 2023-03-05

【中文标题】IE9 HTML5 占位符 - 人们是如何实现这一目标的？

【英文标题】：IE9 HTML5 placeholder - how are people achieving this?

【发布时间】：2012-07-03 11:04:37

【问题描述】：

我正在尝试在我的 Web 应用程序中使用 placeholder="xxx" 属性，但我不想为 IE9 提供特殊的视觉效果。人们能否提出一些在 IE9 中实现此功能的好建议？

我在这里找到了几个链接，但建议的脚本都不够用……答案是从 2011 年年中开始的，所以我想也许有更好的解决方案。也许有一个被广泛采用的 jQuery 插件？我不想使用任何需要侵入性代​​码的东西，例如需要某个 css 类或其他东西。

谢谢。

EDIT - 我也需要这个来处理密码输入字段。

// the below snippet should work, but isn't.
$(document).ready(function() 
   initPlaceholders()();


function initPlaceholders() 
        $.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) 
    $.support.placeholder = true;
    return function()  
 else 
    return function() 
        $(function() 
            var active = document.activeElement;
            $('form').delegate(':text, :password', 'focus', function() 
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && _val == _placeholder) 
                    $(this).val('').removeClass('hasPlaceholder');
                
            ).delegate(':text, :password', 'blur', function() 
                var _placeholder = $(this).attr('placeholder'),
                    _val = $(this).val();
                if (_placeholder != '' && (_val == '' || _val == _placeholder)) 
                    $(this).val(_placeholder).addClass('hasPlaceholder');
                
            ).submit(function() 
                $(this).find('.hasPlaceholder').each(function()  $(this).val(''); );
            );
            $(':text, :password').blur();
            $(active).focus();
        );
    

【问题讨论】：

placeholder in ie9 的可能重复项

【参考方案1】：

我们只是研究了同样的事情。在做了一些小改动后，我们决定重用 Aaron McCall 的 this gist。主要优点是代码简单易懂：

删除内核和 setup_placeholders 部分。只需立即在匿名函数中调用它。

在test之前添加var。

对于支持placeholder 的浏览器，它只是回退到那个。它还处理现有表单中的新输入元素（注意使用delegate）。但不处理动态的新表单元素。它可能会被修改为使用jQuery.on。

如果你不喜欢这个，你可以使用其中一个here。然而，它们中的一些过于复杂，或者有像setTimeout 这样的用于检测新元素的可疑设计决策。

请注意，它需要使用两对括号，因为您调用的是匿名函数，然后调用返回的函数（这可能会以不同的方式分解）：

(function () 
  // ...
)()();

【讨论】：

啊。好吧，无论如何，谢谢你的链接。没有指定许可证；不知道有没有？

其实我只是想这样做，在 IE9 中什么也没发生。我调用建议的代码以：$.support.placeholder = false; 开头，但我没有看到它获取占位符属性值....这对密码字段有效吗？

@Adam，不，它不适用于密码，但您可以在:text 之后添加, :password。

为了在密码字段上工作，它们需要更改为文本字段（在某些版本的 IE 中是不允许的（在这种情况下，您必须创建一个临时文本-密码字段旁边的字段））。否则它只会显示 **** 而不是占位符文本。

This plugin by Mathias Bynens 无需任何调整或修改即可完美运行。

【参考方案2】：

不久前我写了一个 jquery 插件，它为任何不支持它的浏览器添加了占位符支持，并且在那些支持它的浏览器中什么也不做。

Placeholder Plugin

【参考方案3】：

这是一个同样适用于密码字段的 jQuery 插件。它不像 Matthew 建议的代码那么小，但它有更多的修复。我也成功地将它与 H5Validate 一起使用。

http://webcloud.se/code/jQuery-Placeholder/

【讨论】：

这一项有效，但不适用于密码字段。有人有解决方案吗？

嗯，它确实适用于密码字段。您可以在此处查看从第 10 行开始的相关代码：github.com/danielstocks/jQuery-Placeholder/blob/master/…

这很奇怪，因为它实际上并没有在密码字段上表现。我确实查看了代码，看看你在指出什么。嗯....

这很奇怪。你可以使用 DOM 检查器来查看发生了什么吗？ （占位符集、类型属性更改或插入虚拟文本字段等？）