检查是否支持占位符的简单方法

Simple way to check if placeholder is supported?

本文关键字：简单 方法 占位符 是否 支持 检查      更新时间：2023-09-26

我想在我的代码中使用HTML5 "placeholder"属性，如果用户的浏览器支持它，否则只是在表单的顶部打印字段名称。但是我只想检查是否支持占位符，而不是用户正在使用的浏览器的版本/名称。

所以理想情况下，我想做的是

    <body>
     <script>
           if (placeholderIsNotSupported) {
             <b>Username</b>;
           } 
      </script>
    <input type = "text" placeholder ="Username">
</body>

除了我不确定javascript位。感谢帮助!

function placeholderIsSupported() {
    var test = document.createElement('input');
    return ('placeholder' in test);
}

我使用了一个jquery化的版本作为起点。

或者直接:

if (document.createElement("input").placeholder == undefined) {
    // Placeholder is not supported
}

另一种不需要在内存中进行GC的输入元素的方法:

if ('placeholder' in HTMLInputElement.prototype) {
    ...
}

如果您正在使用Modernizr，请快速捕获以下内容:

if(!Modernizr.input.placeholder){
  ...
}

http://html5tutorial.info/html5-placeholder.php有相应的代码。

如果你已经在使用jQuery，你不需要这样做。有一些占位符插件(http://plugins.jquery.com/plugin-tags/placeholder)可以在可能的情况下使用HTML5属性，如果没有，Javascript可以模拟它。

我想做同样的事情…这里我写了

if(!('placeholder'in document.createElement("input"))){
   //... document.getElementById("element"). <-- rest of the code
}}

有了这个，你应该有一个id来标识带有占位符的元素…

你好，这是一个老问题，但希望这能帮助到一些人。

这个脚本将检查浏览器中占位符的兼容性，如果不兼容，它将使所有带有占位符的输入字段使用value="字段代替。请注意，当提交表单时，如果没有输入任何内容，它也会将您的输入更改为"。

// Add support for placeholders in all browsers
var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);
if (testPlaceholderCompatibility === false)
{
   $('[placeholder]').load(function(){
        var input = $(this);
        if (input.val() == '')
        {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    });
    $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}

有点晚了，但是如果你正在使用jQuery或AngularJS，你可以在不使用任何插件的情况下简化上面建议的方法。

jQuery 

typeof $('<input>')[0].placeholder == 'string'

AngularJS 

typeof angular.element('<input>')[0].placeholder == 'string'

检查非常相似，因为AngularJS在底层运行jQlite。

注意:占位符在某种程度上不能在ie浏览器中工作，它应该可以。

document.createElement("input").placeholder == undefined

不能在ie11中工作- document.createElement("input")。占位符返回空字符串

var testInput = document.createElement('input');
testPlaceholderCompatibility = ('placeholder' in testInput);

不能在ie11中工作-返回true

'placeholder'in document.createElement("input")

不能在ie11中工作-返回true

理论上，Internet explorer 11应该支持占位符，但实际上-当输入焦点占位符消失。在Chrome占位符显示，直到你实际输入的东西，无论在焦点。所以，在这种情况下，特征检测不起作用——你需要检测IE并显示标签。

相关文章：