blocks|key|5298668|text|您要做的是使用HTML5+attribute+placeholder，它允许您为输入框设置默认值：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5298669|<input+type="text"+name="inputBox"+placeholder="enter+your+text+here">|5298670|这应该会达到你想要的效果。但是，请小心，因为Internet+Explorer+9和更早版本不支持占位符属性。|5298671|entityMap^0|N|B|0|0|1Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p>What you want to do is use the HTML5 attribute <code>placeholder</code> which lets you set a default value for your input box:  </p>

<p><code>&lt;input type="text" name="inputBox" placeholder="enter your text here"&gt;</code>  </p>

<p>This should achieve what you're looking for. However, be careful because the placeholder attribute is not supported in Internet Explorer 9 and earlier versions.</p>


blocks|key|1507984|text|要做到这一点，您可以使用onfocus和onblur这两个事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1507985|<input+type="text"+name="theName"+value="DefaultValue"
++onblur="if(this.value==''){+this.value='DefaultValue';+this.style.color='#BBB';}"
++onfocus="if(this.value=='DefaultValue'){+this.value='';+this.style.color='#000';}"
++style="color:#BBB;"+/>|code-block|syntax|javascript|1507986|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>To accomplish that, you can use the two events onfocus and onblur:</p>

<pre><code>&lt;input type="text" name="theName" value="DefaultValue"
  onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
  onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
  style="color:#BBB;" /&gt;
</code></pre>


blocks|key|5298676|text|试试这个吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5298677|<label+for="user">user</label>
<input+type="text"+name="user"+
onfocus="if(this.value==this.defaultValue)this.value=''"++++
onblur="if(this.value=='')this.value=this.defaultValue"+
value="username"+maxlength="19"+/>|code-block|syntax|javascript|5298678|希望这能有所帮助。|5298679|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>try this one out.</p>

<pre><code>&lt;label for="user"&gt;user&lt;/label&gt;
&lt;input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"    
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" /&gt;
</code></pre>

<p>hope this helps.</p>


blocks|key|5298713|text|这很简单，我认为应该解决所有问题的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5298714|<input+name="myvalue"+id="valueText"+type="text"+value="ENTER+VALUE">|code-block|syntax|javascript|5298715|这是您的提交按钮：|5298716|<input+type="submit"+id=+"submitBtn"+value="Submit">|5298717|然后将这个小jQuery放在一个js文件中：|5298718|//this+will+submit+only+if+the+value+is+not+default
$("#submitBtn").click(function+()+{
++++if+($("#valueText").val()+===+"ENTER+VALUE")
++++{
++++++++alert("please+insert+a+valid+value");
++++++++return+false;
++++}
});

//this+will+put+default+value+if+the+field+is+empty
$("#valueText").blur(function+()+{
++++if(this.value+==+''){+
++++++++this.value+=+'ENTER+VALUE';
++++}
});+

+//this+will+empty+the+field+is+the+value+is+the+default+one
+$("#valueText").focus(function+()+{
++++if+(this.value+==+'ENTER+VALUE')+{
++++++++this.value+=+'';+
++++}
});|5298719|而且它也可以在较老的浏览器中工作。另外，如果你需要的话，它可以很容易地转换成普通的javascript。|5298720|entityMap^0|0|0|0|0|0|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|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>This is as simple I think the solution that should solve all your problems:</p>

<pre><code>&lt;input name="myvalue" id="valueText" type="text" value="ENTER VALUE"&gt;
</code></pre>

<p>This is your submit button:</p>

<pre><code>&lt;input type="submit" id= "submitBtn" value="Submit"&gt;
</code></pre>

<p>then put this small jQuery in a js file:</p>

<pre><code>//this will submit only if the value is not default
$("#submitBtn").click(function () {
    if ($("#valueText").val() === "ENTER VALUE")
    {
        alert("please insert a valid value");
        return false;
    }
});

//this will put default value if the field is empty
$("#valueText").blur(function () {
    if(this.value == ''){ 
        this.value = 'ENTER VALUE';
    }
}); 

 //this will empty the field is the value is the default one
 $("#valueText").focus(function () {
    if (this.value == 'ENTER VALUE') {
        this.value = ''; 
    }
});
</code></pre>

<p>And it works also in older browsers. Plus it can easily be converted to normal javascript if you need.</p>


blocks|key|5298740|text|使用占位符属性。当用户开始键入时，文本将消失。这是我正在做的一个项目的例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5298741|<div+class=""+id="search-form">
++++<input+type="text"+name=""+value=""+class="form-control"+placeholder="Search..."+>
</div>|code-block|syntax|javascript|5298742|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>Use the placeholder attribute. The text disappears when the user starts typing.
This is an example of a project I am working on:</p>

<pre><code>&lt;div class="" id="search-form"&gt;
    &lt;input type="text" name="" value="" class="form-control" placeholder="Search..." &gt;
&lt;/div&gt;
</code></pre>


blocks|key|1508033|text|很简单：<input+type="text"+name="email"+value="e-mail..."+onFocus="this.value=''">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1508034|entityMap^0|4|22|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Simple as this: <code>&lt;input type="text" name="email" value="e-mail..." onFocus="this.value=''"&gt;</code></p>


blocks|key|1770810|text|像这样怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1770811|<input+name="myvalue"+type="text"+onfocus="if(this.value=='enter+value')this.value='';"+onblur="if(this.value=='')this.value='enter+value';">|offset|length|style|CODE|1770812|这将在第一次聚焦时清除，但在用户输入它们的值后不会清除后续的聚焦，如果保留为空，它将恢复给定值。|1770813|entityMap^0|0|0|3X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>How about something like this?</p>

<p><code>&lt;input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';"&gt;</code></p>

<p>This will clear upon focusing the first time, but then won't clear on subsequent focuses after the user enters their value, when left blank it restores the given value.</p>


<p>I can easily create a html input field that has text already in it. But when the user clicks on the input field the text doesn't disappears but stays there. The user then has to manually remove the text to type. How can I create an input field where when the user clicks on the input field box the text then disappear?</p>


Text in HTML Field to disappear when clicked?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我可以很容易地创建一个html输入字段，里面已经有文本了。但是，当用户单击输入字段时，文本不会消失，而是停留在那里。然后，用户必须手动删除要键入的文本。如何创建一个输入字段，当用户单击输入字段框时，文本将消失？

问HTML字段中的文本在单击时会消失吗？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML字段中的文本在单击时会消失吗？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML字段中的文本在单击时会消失吗？
EN