Question

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

所以理想情况下，我想做一些像

这样的事情

    <body>

     <script>

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

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

Answer 1

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

我用jQuery-ized version作为起点。（只是给予应有的信用。）

Answer 2

或者只是：

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

Answer 3

另一种不在内存中创建输入元素的方法必须是GC＆＃39; d：

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

Answer 4

如果您使用的是Modernizr，请快速关注以下内容：

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

Answer 5

http://html5tutorial.info/html5-placeholder.php有代码可以执行此操作。

如果你已经在使用jQuery，那么你真的不需要这样做。有可用的占位符插件（http://plugins.jquery.com/plugin-tags/placeholder）尽可能使用HTML5属性，如果没有则使用Javascript进行模拟。

Answer 6

我正在尝试做同样的事......我在这里写了这个

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

有了这个，你应该有一个id来识别带占位符的元素...... 我不知道是否这也有助于您在不支持占位符时仅识别元素。

Answer 7

嗨，这是一个老问题，但希望这有助于某人。

此脚本将检查浏览器中占位符的兼容性，如果它不兼容，则会使所有带占位符的输入字段使用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('');
            }
        })
    });
}

Answer 8

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

<强>的jQuery

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

<强> AngularJS

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

检查非常相似，因为AngularJS在引擎盖下运行jQlite。

Answer 9

注意：占位符在某种程度上不能在Internet Explorer中工作，它应该可以工作。

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

无法在Internet Explorer 11中使用 - document.createElement（“input”）。占位符返回空字符串

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

无法在Internet Explorer 11中运行 - 返回true

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

无法在Internet Explorer 11中运行 - 返回true

理论上，Internet Explorer 11应该支持占位符，但事实上 - 当输入得到焦点占位符消失时。在Chrome中，占位符显示，直到您实际键入内容，无论焦点如何。因此，在这种情况下，功能检测不起作用 - 您需要检测IE并显示标签。

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

9 个答案: