jquery - 如何修复 Internet Explorer 的占位符？

Question

我想为文本和密码输入字段设置占位符。除了 Internet Explorer，我可以在任何东西上做到这一点。如何才能做到这一点？也许jQuery？特别是对于密码，我希望占位符说“密码”。一旦点击输入，其中的文本将显示为密码文本。谢谢！:)

Answer 1

IE9+ 应该支持占位符，但我发现事实并非如此。有几种方法可以“假装”有占位符。我发现在 IE 上具有占位符外观/感觉的最佳方法是创建一个 jquery 函数，该函数在输入框后面添加一个 div（使输入框透明）以及您要显示的文本。然后当输入或数据出现时 A display:none div 或 opaque 输入框。

其他人将文本放在输入字段中，但是验证和密码字段可能会很麻烦。

就像是：

// Check browser type so we don't mess with other browsers that do this right
if (BrowserDetect.browser === 'Explorer') {
    // Find all placeholders
    $('[placeholder]').each(function(_index, _this) {
        var $this = $(this);
        var id = this.id;
        var thisValue = $this.val();
        var value = $this.attr('placeholder');
        var $element = $('#' + id + '_ph');
        if ( $element.length === 0 ) {
            // Add placeholder if no input you want to add it even if value in case they remove value
            $this.attr('placeholder', '');
            // Add the div (make sure you style ie_placeholder_fix
            // class with correct positioning etc)
            $('<div id="' + id + '_ph" class="ie_placeholder_fix">' + value + '</div>').insertAfter($this);
        }
        //Maybe you want to hide if it has a value?
        if ( thisValue ) { $element.hide(); } else { $element.show(); }
        $this.blur(checkForInput);
    });
}

您只需要检查它们是否有值，如果预先填充了值（即可编辑的表单），是否隐藏 div