blocks|key|154296|text|您可以使用这个jQuery插件：https://github.com/mathiasbynens/jquery-placeholder|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|154297|但是你的链接似乎也是一个很好的解决方案。|154298|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mathiasbynens/jquery-placeholder^0|G|1F|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>You could use this jQuery plugin:
<a href="https://github.com/mathiasbynens/jquery-placeholder" rel="noreferrer">https://github.com/mathiasbynens/jquery-placeholder</a></p>

<p>But your link seems to be also a good solution.</p>


blocks|key|154339|text|我有几个插件的兼容性问题，对我来说，这似乎是支持文本输入占位符的最简单方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154340|function+placeholders(){
++++//On+Focus
++++$(":text").focus(function(){
++++++++//Check+to+see+if+the+user+has+modified+the+input,+if+not+then+remove+the+placeholder+text
++++++++if($(this).val()+==+$(this).attr("placeholder")){
++++++++++++$(this).val("");
++++++++}
++++});

++++//On+Blur
++++$(":text").blur(function(){
++++++++//Check+to+see+if+the+use+has+modified+the+input,+if+not+then+populate+the+placeholder+back+into+the+input
++++++++if(+$(this).val()+==+""){
++++++++++++$(this).val($(this).attr("placeholder"));
++++++++}
++++});
}|code-block|syntax|javascript|154341|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|$]]

<p>I had compatibility issues with several plugins I tried, this seems to me to be the simplest way of supporting placeholders on text inputs:</p>

<pre><code>function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}
</code></pre>


blocks|key|372396|text|$(function(){++++
++++if($.browser.msie+&&+$.browser.version+<=+9){
++++++++$("[placeholder]").focus(function(){
++++++++++++if($(this).val()==$(this).attr("placeholder"))+$(this).val("");
++++++++}).blur(function(){
++++++++++++if($(this).val()=="")+$(this).val($(this).attr("placeholder"));
++++++++}).blur();

++++++++$("[placeholder]").parents("form").submit(function()+{
++++++++++++$(this).find('[placeholder]').each(function()+{
++++++++++++++++if+($(this).val()+==+$(this).attr("placeholder"))+{
++++++++++++++++++++$(this).val("");
++++++++++++++++}
++++++++++++})
++++++++});
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|372397|尝尝这个|unstyled|372398|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$(function(){    
    if($.browser.msie &amp;&amp; $.browser.version &lt;= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});
</code></pre>

<p>try this</p>


blocks|key|154458|text|对于其他登陆这里的人来说。这是对我有效的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154459|//jquery+polyfill+for+showing+place+holders+in+IE9
$('[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();

$('[placeholder]').parents('form').submit(function()+{
++++$(this).find('[placeholder]').each(function()+{
++++++++var+input+=+$(this);
++++++++if+(input.val()+==+input.attr('placeholder'))+{
++++++++++++input.val('');
++++++++}
++++})
});|code-block|syntax|javascript|154460|只需将此代码添加到script.js文件中即可。由http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html提供|offset|length|154461|entityMap|0|LINK|mutability|MUTABLE|url|http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html^0|0|0|P|24|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>For others landing here. This is what worked for me:</p>

<pre><code>//jquery polyfill for showing place holders in IE9
$('[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();

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});
</code></pre>

<p>Just add this in you script.js file.
Courtesy of <a href="http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html" rel="nofollow noreferrer">http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html</a></p>


blocks|key|372409|text|我使用了这个链接http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|372410|但在浏览器检测中，我使用了：|372411|if+(navigator.userAgent.indexOf('MSIE')+>+-1)+{
+//Your+placeholder+support+code+here...
}|code-block|syntax|javascript|372412|entityMap|0|LINK|mutability|MUTABLE|url|http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html^0|8|2G|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>I used the code of this link 
<a href="http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html" rel="nofollow" title="http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html">http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html</a></p>

<p>But in browser detection I used:</p>

<pre><code>if (navigator.userAgent.indexOf('MSIE') &gt; -1) {
 //Your placeholder support code here...
}
</code></pre>


blocks|key|372435|text|<input+type="text"+name="Name"+value="Name"+onfocus="this.value+=+''"+onblur="+if(this.value+=+'')+{+value+=+'Name'}"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|372436|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" /&gt;
</code></pre>


blocks|key|154391|text|添加下面的代码就可以了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154392|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
++++<script+src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
++++<script+type="text/javascript">
++++++++//+Mock+client+code+for+testing+purpose
++++++++$(function(){
++++++++++++//+Client+should+be+able+to+add+another+change+event+to+the+textfield
++++++++++++$("input[name='input1']").blur(function(){+alert("Custom+event+triggered.");+});++++
++++++++++++//+Client+should+be+able+to+set+the+field's+styles,+without+affecting+place+holder
++++++++++++$("textarea[name='input4']").css("color",+"red");

++++++++++++//+Initialize+placeholder
++++++++++++$.Placeholder.init();

++++++++++++//+or+try+initialize+with+parameter
++++++++++++//$.Placeholder.init({+color+:+'rgb(255,+255,+0)'+});

++++++++++++//+call+this+before+form+submit+if+you+are+submitting+by+JS
++++++++++++//$.Placeholder.cleanBeforeSubmit();
++++++++});
++++</script>|code-block|syntax|javascript|154393|从https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip下载完整代码和演示|offset|length|154394|entityMap|0|LINK|mutability|MUTABLE|url|https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip^0|0|0|1|2O|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Add the below code and it will be done. </p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    &lt;/script&gt;
</code></pre>

<p>Download the full code and demo from <a href="https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip" rel="nofollow">https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip</a></p>


blocks|key|154412|text|以下是一个javascript函数，它将为IE+8及更低版本创建占位符，它也适用于密码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|154413|​|154414|/*+Function+to+add+placeholders+to+form+elements+on+IE+8+and+below+*/
function+add_placeholders(fm)+{	
	for+(var+e+=+0;+e+<+document.fm.elements.length;+e%2B%2B)+{
		if+(fm.elements[e].placeholder+!=+undefined+&&
		document.createElement("input").placeholder+==+undefined)+{+//+IE+8+and+below					
			fm.elements[e].style.background+=+"transparent";
			var+el+=+document.createElement("span");
			el.innerHTML+=+fm.elements[e].placeholder;
			el.style.position+=+"absolute";
			el.style.padding+=+"2px;";
			el.style.zIndex+=+"-1";
			el.style.color+=+"#999999";
			fm.elements[e].parentNode.insertBefore(el,+fm.elements[e]);
			fm.elements[e].onfocus+=+function()+{
					this.style.background+=+"yellow";	
			}
			fm.elements[e].onblur+=+function()+{
				if+(this.value+==+"")+this.style.background+=+"transparent";
				else+this.style.background+=+"white";	
			}		
		}+
	}
}

add_placeholders(document.getElementById('fm'))|code-block|syntax|javascript|154415|<form+id="fm">
++<input+type="text"+name="email"+placeholder="Email">
++<input+type="password"+name="password"+placeholder="Password">
++<textarea+name="description"+placeholder="Description"></textarea>
</form>|154416|154417|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here is a javascript function that will create placeholders for IE 8 and below and it works for passwords as well:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {	
	for (var e = 0; e &lt; document.fm.elements.length; e++) {
		if (fm.elements[e].placeholder != undefined &amp;&amp;
		document.createElement("input").placeholder == undefined) { // IE 8 and below					
			fm.elements[e].style.background = "transparent";
			var el = document.createElement("span");
			el.innerHTML = fm.elements[e].placeholder;
			el.style.position = "absolute";
			el.style.padding = "2px;";
			el.style.zIndex = "-1";
			el.style.color = "#999999";
			fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
			fm.elements[e].onfocus = function() {
					this.style.background = "yellow";	
			}
			fm.elements[e].onblur = function() {
				if (this.value == "") this.style.background = "transparent";
				else this.style.background = "white";	
			}		
		} 
	}
}

add_placeholders(document.getElementById('fm'))</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="fm"&gt;
  &lt;input type="text" name="email" placeholder="Email"&gt;
  &lt;input type="password" name="password" placeholder="Password"&gt;
  &lt;textarea name="description" placeholder="Description"&gt;&lt;/textarea&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|372400|text|++++<script>
++++++++if+($.browser.msie)+{
++++++++++++$('input[placeholder]').each(function()+{

++++++++++++++++var+input+=+$(this);

++++++++++++++++$(input).val(input.attr('placeholder'));

++++++++++++++++$(input).focus(function()+{
++++++++++++++++++++if+(input.val()+==+input.attr('placeholder'))+{
++++++++++++++++++++++++input.val('');
++++++++++++++++++++}
++++++++++++++++});

++++++++++++++++$(input).blur(function()+{
++++++++++++++++++++if+(input.val()+==+''+%7C%7C+input.val()+==+input.attr('placeholder'))+{
++++++++++++++++++++++++input.val(input.attr('placeholder'));
++++++++++++++++++++}
++++++++++++++++});
++++++++++++});
++++++++}
++++++++;
++++</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|372401|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>    &lt;script&gt;
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    &lt;/script&gt;
</code></pre>


<p>I have a small issue, the <code>placeholder</code> attribute for input boxes is not supported in IE 8-9.</p>

<p>What is the best way to make this support in my project (ASP Net). I am using jQuery.
Need I use some other external tools for it?</p>

<p>Is <a href="http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html" rel="noreferrer">http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html</a> a good solution?</p>


How to support placeholder attribute in IE8 and 9

jQuery

我有一个小问题，IE 8-9不支持输入框的placeholder属性。在我的项目(ASP.NET)中提供这种支持的最好方法是什么？我正在使用jQuery。我需要使用一些其他的外部工具吗？是一个好的解决方案吗？

问如何在IE8和9中支持占位符属性
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在IE8和9中支持占位符属性EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在IE8和9中支持占位符属性
EN