blocks|key|721038|text|function+placeholderIsSupported()+{
++++var+test+=+document.createElement('input');
++++return+('placeholder'+in+test);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|721039|我使用jQuery-ized+version作为起点。(只是在该做的事情上给予表扬。)|unstyled|offset|length|721040|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/^0|0|3|J|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>function placeholderIsSupported() {
 var test = document.createElement('input');
 return ('placeholder' in test);
}
</code></pre>

I used a <a href="http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/" rel="noreferrer">jQuery-ized version</a> as a starting point. (Just giving credit where it's due.)

blocks|key|505054|text|或者只是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505055|if+(document.createElement("input").placeholder+==+undefined)+{
++++//+Placeholder+is+not+supported
}|code-block|syntax|javascript|505056|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Or just:

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

blocks|key|505181|text|另一种不需要在内存中创建必须进行GC的输入元素的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505182|if+('placeholder'+in+HTMLInputElement.prototype)+{
++++...
}|code-block|syntax|javascript|505183|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another way without making an input element in memory that has to be GC'd:

<pre><code>if ('placeholder' in HTMLInputElement.prototype) {
 ...
}
</code></pre>

blocks|key|505031|text|如果您使用的是Modernizr，请快速捕获以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505032|if(!Modernizr.input.placeholder){
++...
}|code-block|syntax|javascript|505033|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are using Modernizr, quick catch following:

<pre><code>if(!Modernizr.input.placeholder){
 ...
}
</code></pre>

blocks|key|721095|text|http://html5tutorial.info/html5-placeholder.php有做这件事的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|721096|如果您已经在使用jQuery，那么您实际上并不需要这样做。有可用的占位符插件(+http://plugins.jquery.com/plugin-tags/placeholder+)，它将在可能的情况下使用HTML5属性，如果没有，则使用Javascript来模拟它。|721097|entityMap|0|LINK|mutability|MUTABLE|url|http://html5tutorial.info/html5-placeholder.php|1|http://plugins.jquery.com/plugin-tags/placeholder^0|0|1B|0|0|14|1D|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<a href="http://html5tutorial.info/html5-placeholder.php" rel="nofollow">http://html5tutorial.info/html5-placeholder.php</a> has the code to do it.

If you're already using jQuery, you don't really need to do this though. There are placeholder plugins available ( <a href="http://plugins.jquery.com/plugin-tags/placeholder" rel="nofollow">http://plugins.jquery.com/plugin-tags/placeholder</a> ) that will use the HTML5 attribute where possible, and Javascript to simulate it if not.

blocks|key|721194|text|我也在试着做同样的事...我在这里写了以下内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721195|if(!('placeholder'in+document.createElement("input"))){
+++//...+document.getElementById("element").+<--+rest+of+the+code
}}|code-block|syntax|javascript|721196|有了这个，你应该有一个id来用占位符来标识元素……我不知道这是否也能帮助你在不支持占位符的情况下识别元素。|721197|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I'm trying to do the same... here i wrote this

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

With this you should have an id to identify the element with the placeholder...
I don't know thought if this also help you to identify the element ONLY when the placeholder isn't supported.

blocks|key|721245|text|嗨，这里，这是一个老问题，但希望这能帮助一些人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721246|此脚本将检查浏览器中占位符的兼容性，如果不兼容，它将使所有带有占位符的输入域都使用value="“域。注意:当表单提交时，如果没有输入任何内容，它还会将您的输入更改回"“。|721247|//+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()+==+''+%7C%7C+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('');
++++++++++++}
++++++++})
++++});
}|code-block|syntax|javascript|721248|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Hi there this is an old question but hopefully this helps someone. 

This script will check the compatibility of placeholders in your browser, and if its not compatible it will make all input fields with a placeholder use the value="" field instead. Note when the form is submitted it will also change your input back to "" if nothing was entered.

<pre><code>// 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('');
 }
 })
 });
}
</code></pre>

I want to use the <code>HTML5</code> <code>"placeholder"</code> attribute in my code if the user's browser supports it otherwise just print the field name on top of the form. But I only want to check whether placeholder is supported and not what version/name of browser the user is using.

So Ideally i would want to do something like

<pre><code> &lt;body&gt;

 &lt;script&gt;

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

Except Im not sure of the javascript bit. Help is appreciated!

Simple way to check if placeholder is supported?

jQuery

HTML5

如果用户的浏览器支持的话，我想在代码中使用HTML5 "placeholder"属性，否则只需在表单顶部打印字段名即可。但我只想检查是否支持占位符，而不是用户使用的浏览器的版本/名称。所以在理想情况下，我想做一些类似的事情 <body> <script> if (placeholderIsNotSupported) { Usernam

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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