Javascript 如何清除文本字段焦点上的文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5324159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear text field on focus of text field
提问by Gaurav Srivastava
I want to clear the text field when the user clicks on that
我想在用户点击时清除文本字段
<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />
<input name="name" type="text" id="input1" size="30" maxlength="1000" value="Enter Postcode or Area" onfocus=="this.value=''" />
采纳答案by Ash Burlaczenko
To do this you will need to use a scripting language, probably javascript. Here an example
为此，您需要使用脚本语言，可能是 javascript。这里有一个例子
<input type='text' value'Some text' onclick='javascript: this.value = ""' />
Hope this helps.
希望这可以帮助。
Edit:
编辑：
To meet what David is explain here is a second example in case that is what you are looking for
为了满足大卫在这里的解释，这是第二个例子，以防万一这是你正在寻找的
<script type='javascript'>
var clear = true;
function clear(obj)
{
if(clear)
{
obj.value = '';
clear = false;
}
}
</script>
<input type='text' value'Some text' onfocus='clear(this);' />
回答by ORyan
Unless you are doing something specific where you only want to clear onclick, I would suggest (as others have noted) to use the onfocus actions instead. This way if someone is using tab to navigate it will also clear the default text.
除非你正在做一些你只想清除 onclick 的特定事情，否则我建议（正如其他人所指出的那样）改用 onfocus 操作。这样，如果有人使用选项卡进行导航，它也会清除默认文本。
You can also use onblur to check if it's empty to bring it back:
您还可以使用 onblur 检查它是否为空以将其带回：
<input type="text" value="Default text" name="yourName" onfocus="if(this.value == 'Default text') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'Default text'; }">
回答by Jhourlad Estrella
Using jQuery library:
使用 jQuery 库：
<input id="clearme" value="Click me quick!" />
$('#clearme').focus(function() {
$(this).val('');
});
回答by Vishal Kumar
Or you can simply use the placeholder attribute
For example<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>
或者您可以简单地使用占位符属性例如<input name="name" type="text" id="input1" size="30" maxlength="1000" placeholder="Enter Postcode or Area"/>
回答by Romain Linsolas
You can use <input ... onfocus="this.value='';"/>.
您可以使用<input ... onfocus="this.value='';"/>.
This way, the field will be cleared when it gains focus. However, if you only want to clear it when user clicks on it (i.e. not when the field gains focus with the keyboard for example), then use onclickinstead of onfocus.
这样，该字段在获得焦点时将被清除。但是，如果您只想在用户单击它时清除它（例如，不是当字段获得焦点时使用键盘），则使用onclick代替onfocus。
However, as pointed by David Dorwardin a comment, this behavior may not be expected by the user. So be careful to set this feature on really specific fields (such as search field).
但是，正如David Dorward在评论中指出的那样，用户可能不会期望这种行为。因此，在真正特定的字段（例如搜索字段）上设置此功能时要小心。
回答by rockmandew
This is how I use it for a temperature converter/calculator - when the user types (keyup), the text input box calculates using the assigned function; when the user selects the other text input (there are only two inputs), the selected text input will clear.
这就是我将它用于温度转换器/计算器的方式 - 当用户键入 (keyup) 时，文本输入框使用指定的函数进行计算；当用户选择其他文本输入（只有两个输入）时，选定的文本输入将被清除。
HTML:
HTML：
<p class="celcius"><h2 style="color:#FFF">Input:</h2>
<input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" onfocus="this.value='';" id="celsius" />
</p>
<hr>
<h2 style="color:#FFF">Result:</h2>
<p class="fahrenheit">
<input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" onfocus="this.value='';"placeholder="Temperature (Fahrenheit)" />
</p>
JavaScript:
JavaScript：
function Conversion() {
var tempCels = parseFloat(document.getElementById('celsius').value);
tempFarh =(tempCels)*(1.8)+(32);
document.getElementById('fahrenheit').value= tempFarh;
}
function Conversion2() {
var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
tempCels =(tempFarh - 32)/(1.8);
document.getElementById('celsius').value= tempCels;
}
回答by user3152781
try this ,it worked for me
试试这个，它对我有用
add this into your input tag
将此添加到您的输入标签中
<code>
onfocus="this.value='';"</code>
for example if your code is
例如，如果您的代码是
<code>
<input type="text" value="Name" /></code>
use it like this
像这样使用它
<code><input onfocus="this.value='';" type="text" value="Name" /></code>
回答by Philip Taylor
function Clear (x) {if (x.cleared) {} else {x.value = ""; x.cleared = true}}
onfocus = "Clear (this)"
回答by Matyas
Add a following script to your js file:
将以下脚本添加到您的 js 文件中：
var input1 = document.getElementById("input1")
input1.onfocus = function() {
if(input1.value == "Enter Postcode or Area") {
input1.value = "";
}
};
input1.onblur = function() {
if(input1.value == "") {
input1.value = "Enter Postcode or Area";
}
};
