blocks|key|1992756|text|这个答案说明了HTML5之前的一种方法。请看一下使用placeholder属性的现代解决方案的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1992757|1992758|HTML：|1992759|<input+type="text"+name="firstname"+title="First+Name"+style="color:#888;"+
++++value="First+Name"+onfocus="inputFocus(this)"+onblur="inputBlur(this)"+/>|code-block|syntax|javascript|1992760|JavaScript：|1992761|function+inputFocus(i)+{
++++if+(i.value+==+i.defaultValue)+{+i.value+=+"";+i.style.color+=+"#000";+}
}
function+inputBlur(i)+{
++++if+(i.value+==+"")+{+i.value+=+i.defaultValue;+i.style.color+=+"#888";+}
}|1992762|entityMap^0|Q|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|W|8|@]|D|@]|E|$]]|$1|G|3|H|5|6|7|X|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|Y|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|10|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p><em>This answer illustrates a pre-HTML5 approach. Please take a look at <a href="https://stackoverflow.com/a/4681058/559745">Psytronic's answer</a> for a modern solution using the <code>placeholder</code> attribute.</em></p>

<hr>

<p>HTML:</p>

<pre><code>&lt;input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" /&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}
</code></pre>


blocks|key|1992724|text|Chrome、火狐、IE10和Safari都支持html5占位符属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1992725|<input+type="text"+placeholder="First+Name:"+/>|offset|length|style|CODE|1992726|为了获得更多跨浏览器的解决方案，你需要使用一些javascript，有很多预制的解决方案，尽管我不知道有任何解决方案。|1992727|http://www.w3schools.com/tags/att_input_placeholder.asp|1992728|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1B|0|0|0|1J|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|L|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|K]]]]

<p>Chrome, Firefox, IE10 and Safari support the html5 placeholder attribute</p>

<p><code>&lt;input type="text" placeholder="First Name:" /&gt;</code></p>

<p>In order to get a more cross browser solution you'll need to use some javascript, there are plenty of pre-made solutions out there, though I don't know any off the top of my head.</p>

<p><a href="http://www.w3schools.com/tags/att_input_placeholder.asp" rel="noreferrer">http://www.w3schools.com/tags/att_input_placeholder.asp</a></p>


blocks|key|1992782|text|使用HTML5，您可以使用以下命令本机完成此操作：<input+name="first_name"+placeholder="First+Name">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1992783|但并非所有浏览器都支持此功能(IE)|1992784|这可能会起作用：|1992785|<input+type="first_name"+value="First+Name"+onfocus="this.value==this.defaultValue?this.value='':null">|code-block|syntax|javascript|1992786|否则，如果您使用的是jQuery，则可以使用.focus和.css更改颜色。|1992787|entityMap^0|P|1E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>With HTML5, you can do this natively with: <code>&lt;input name="first_name" placeholder="First Name"&gt;</code></p>

<p>This is not supported with all browsers though (IE)</p>

<p>This may work:</p>

<pre><code>&lt;input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null"&gt;
</code></pre>

<p>Otherwise, if you are using jQuery, you can use .focus and .css to change the color. </p>


blocks|key|1992889|text|如果您只针对HTML5，则可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1992890|<input+type="text"+id="firstname"+placeholder="First+Name:"+/>|code-block|syntax|javascript|1992891|对于非HTML5浏览器，我将通过使用jQuery来构建Floern的答案，并使javascript不那么显眼。我也会使用一个类来定义模糊的属性。|1992892|$(document).ready(function+()+{

++++//Set+the+initial+blur+(unless+its+highlighted+by+default)
++++inputBlur($('#Comments'));

++++$('#Comments').blur(function+()+{
++++++++inputBlur(this);
++++});
++++$('#Comments').focus(function+()+{
++++++++inputFocus(this);
++++});

})|1992893|功能：|1992894|function+inputFocus(i)+{
++++if+(i.value+==+i.defaultValue)+{
++++++++i.value+=+"";
++++++++$(i).removeClass("blurredDefaultText");
++++}
}
function+inputBlur(i)+{
++++if+(i.value+==+""+%7C%7C+i.value+==+i.defaultValue)+{
++++++++i.value+=+i.defaultValue;
++++++++$(i).addClass("blurredDefaultText");
++++}
}|1992895|CSS：|1992896|.blurredDefaultText+{
++++color:#888+!important;
}|1992897|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>If you're targeting HTML5 only you can use:</p>

<pre><code>&lt;input type="text" id="firstname" placeholder="First Name:" /&gt;
</code></pre>

<p>For non HTML5 browsers, I would build upon Floern's answer by using jQuery and make the javascript non-obtrusive.  I would also use a class to define the blurred properties.</p>

<pre><code>$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})
</code></pre>

<p>Functions:</p>

<pre><code>function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}
</code></pre>

<p>CSS:</p>

<pre><code>.blurredDefaultText {
    color:#888 !important;
}
</code></pre>


blocks|key|1992864|text|最短的方法是直接将以下代码作为附加属性添加到您想要更改的输入类型中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1992865|onfocus="if(this.value=='Search')this.value=''"+
onblur="if(this.value=='')this.value='Search'"|code-block|syntax|javascript|1992866|请注意:将文本"Search“更改为"go”或任何其他文本以满足您的要求。|1992867|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|$]]

<p>The shortest way is to directly add the below code as additional attributes in the input type that you want to change.</p>

<pre><code>onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"
</code></pre>

<p>Please note: Change the text "Search" to "go" or any other text to suit your requirements.</p>


blocks|key|1779227|text|这是一个精心设计的版本，以帮助您理解|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1779228|function+setVolatileBehavior(elem,+onColor,+offColor,+promptText){+//changed+spelling+of+function+name+to+be+the+same+as+name+used+at+invocation+below
elem.addEventListener("change",+function(){
++++if+(document.activeElement+==+elem+&&+elem.value==promptText){
++++++++elem.value='';
++++++++elem.style.color+=+onColor;
++++}
++++else+if+(elem.value==''){
++++++++elem.value=promptText;
++++++++elem.style.color+=+offColor;
++++}
});
elem.addEventListener("blur",+function(){
++++if+(document.activeElement+==+elem+&&+elem.value==promptText){
++++++++elem.value='';
++++++++elem.style.color+=+onColor;
++++}
++++else+if+(elem.value==''){
++++++++elem.value=promptText;
++++++++elem.style.color+=+offColor;
++++}
});
elem.addEventListener("focus",+function(){
++++if+(document.activeElement+==+elem+&&+elem.value==promptText){
++++++++elem.value='';
++++++++elem.style.color+=+onColor;
++++}
++++else+if+(elem.value==''){
++++++++elem.value=promptText;
++++++++elem.style.color+=+offColor;
++++}
});
elem.value=promptText;
elem.style.color=offColor;
}|code-block|syntax|javascript|1779229|像这样使用：|1779230|setVolatileBehavior(document.getElementById('yourElementID'),'black','gray','Name');|1779231|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is an elaborate version, to help you understand</p>

<pre><code>function setVolatileBehavior(elem, onColor, offColor, promptText){ //changed spelling of function name to be the same as name used at invocation below
elem.addEventListener("change", function(){
    if (document.activeElement == elem &amp;&amp; elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem &amp;&amp; elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem &amp;&amp; elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}
</code></pre>

<p>Use like this:</p>

<pre><code>setVolatileBehavior(document.getElementById('yourElementID'),'black','gray','Name');
</code></pre>


blocks|key|1779258|text|你可以使用Floern的解决方案。您可能还希望在将颜色设置为灰色时禁用输入。http://www.w3schools.com/tags/att_input_disabled.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1779259|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/tags/att_input_disabled.asp^0|12|1G|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can use Floern's solution.  You may also want to disable the input while you set the color to gray.  <a href="http://www.w3schools.com/tags/att_input_disabled.asp" rel="nofollow">http://www.w3schools.com/tags/att_input_disabled.asp</a></p>


blocks|key|1992929|text|下面是一种使用ES6语法在jQuery中的输入上分层文本的简单方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1992930|​|1992931|$('.input-group+>+input').focus(e+=>+$(e.currentTarget).parent().find('.placeholder').hide()).blur(e+=>+{+if+(!$(e.currentTarget).val())+$(e.currentTarget).parent().find('.placeholder').show();+});|code-block|syntax|javascript|1992932|*+{
++font-family:+sans-serif;
}

.input-group+{
++position:+relative;
}

.input-group+>+input+{
++width:+150px;
++padding:+10px+0px+10px+25px;
}

.input-group+>+.placeholder+{
++position:+absolute;
++top:+50%25;
++left:+25px;
++transform:+translateY(-50%25);
++color:+#929292;
}|1992933|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+class="input-group">
++<span+class="placeholder">Username</span>
++<input>
</div>|1992934|1992935|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here's a one-liner slim way for layering text on top of an input in jQuery using ES6 syntax.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.input-group &gt; input').focus(e =&gt; $(e.currentTarget).parent().find('.placeholder').hide()).blur(e =&gt; { if (!$(e.currentTarget).val()) $(e.currentTarget).parent().find('.placeholder').show(); });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  font-family: sans-serif;
}

.input-group {
  position: relative;
}

.input-group &gt; input {
  width: 150px;
  padding: 10px 0px 10px 25px;
}

.input-group &gt; .placeholder {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #929292;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="input-group"&gt;
  &lt;span class="placeholder"&gt;Username&lt;/span&gt;
  &lt;input&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>How do I make a textbox that has a grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?</p>

<p>Example:</p>

<p>A "First Name" text box.  The words "First Name" are inside the text box grayed out, when I click, those words disappear and I write my name in it.</p>


HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

jQuery

HTML5

如何创建具有灰色内容的文本框，当我单击它输入文本时，灰色部分将消失并允许我输入所需的文本？示例：“名字”文本框。“名字”这几个字在文本框中呈灰色，当我点击时，这些字就消失了，我在里面写上了我的名字。

问HTML/CSS使用灰显的文本制作文本框，当我单击输入信息时，该文本框将消失，如何？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS使用灰显的文本制作文本框，当我单击输入信息时，该文本框将消失，如何？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML/CSS使用灰显的文本制作文本框，当我单击输入信息时，该文本框将消失，如何？
EN