jQuery 单击后如何清除输入文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5777674/
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 can I clear the input text after clicking
提问by PsyGnosis
Using jQuery, how can I clear the input text after I made a click? By default, the value remains in the input field.
使用 jQuery，如何在单击后清除输入文本？默认情况下，该值保留在输入字段中。
For example, I have an input text and the value is TEXT. When I perform a click, I want the input field to become empty.
例如，我有一个输入文本，值为TEXT. 当我执行单击时，我希望输入字段变为空。
回答by David says reinstate Monica
To remove the default text, on clicking the element:
要删除默认文本，请单击元素：
$('input:text').click(
function(){
$(this).val('');
});
I would, though, suggest using focus()instead:
不过，我建议focus()改用：
$('input:text').focus(
function(){
$(this).val('');
});
Which responds to keyboard events too (the tab key, for example). Also, you could use the placeholderattribute in the element:
它也响应键盘事件（例如 Tab 键）。此外，您可以placeholder在元素中使用该属性：
<input type="text" placeholder="default text" />
Which will clear on focus of the element, and reappear if the element remains empty/user doesn't input anything.
这将清除元素的焦点，并在元素保持为空/用户未输入任何内容时重新出现。
回答by T.J. Crowder
Update:I took your saying "click" literally, which was a bit dumb of me. You can substitute focusfor clickin all of the below if you also want the action to happen when the user tabs to the input, which seems likely.
更新：我从字面上理解了你所说的“点击”，这对我来说有点愚蠢。如果您还希望在用户按 Tab 键输入时发生操作，您可以替换focus以下click所有内容，这似乎很可能。
Update 2:My guess is that you're looking to do placeholders; see note and example at the end.
更新 2：我的猜测是您正在寻找占位符；请参阅最后的注释和示例。
Original answer:
原答案：
You can do this:
你可以这样做：
$("selector_for_the_input").click(function() {
this.value = '';
});
...but that will clear the text regardless of what it is. If you only want to clear it if it's a specific value:
...但这将清除文本，无论它是什么。如果您只想清除它，如果它是特定值：
$("selector_for_the_input").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
So for example, if the input has an id, you could do:
例如，如果输入有一个id，你可以这样做：
$("#theId").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
Or if it's in a form with an id(say, "myForm") and you want to do this for every form field:
或者，如果它在一个带有id（例如“myForm”）的表单中，并且您想对每个表单字段执行此操作：
$("#myForm input").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
You may also be able to do it with delegation:
您也可以通过委托来做到这一点：
$("#myForm").delegate("input", "click", function() {
if (this.value === "TEXT") {
this.value = '';
}
});
That uses delegateto hook up a handler on the form but apply it to the inputs on the form, rather than hooking up a handler to each individual input.
这用于delegate在表单上连接处理程序，但将其应用于表单上的输入，而不是将处理程序连接到每个单独的输入。
If you're trying to do placeholders, there's more to it than that and you may want to find a good plug-in to do it. But here's the basics:
如果您正在尝试制作占位符，那么还有更多内容，您可能想要找到一个好的插件来完成它。但这是基础知识：
HTML:
HTML：
<form id='theForm'>
<label>Field 1:
<input type='text' value='provide a value for field 1'>
</label>
<br><label>Field 2:
<input type='text' value='provide a value for field 2'>
</label>
<br><label>Field 3:
<input type='text' value='provide a value for field 3'>
</label>
</form>
JavaScript using jQuery:
使用 jQuery 的 JavaScript：
jQuery(function($) {
// Save the initial values of the inputs as placeholder text
$('#theForm input').attr("data-placeholdertext", function() {
return this.value;
});
// Hook up a handler to delete the placeholder text on focus,
// and put it back on blur
$('#theForm')
.delegate('input', 'focus', function() {
if (this.value === $(this).attr("data-placeholdertext")) {
this.value = '';
}
})
.delegate('input', 'blur', function() {
if (this.value.length == 0) {
this.value = $(this).attr("data-placeholdertext");
}
});
});
Of course, you can also use the new placeholderattributefrom HTML5 and only do the above if your code is running on a browser that doesn't support it, in which case you want to invert the logic I used above:
当然，您也可以使用HTML5 中的新placeholder属性，并且仅当您的代码在不支持它的浏览器上运行时才执行上述操作，在这种情况下，您希望反转我上面使用的逻辑：
HTML:
HTML：
<form id='theForm'>
<label>Field 1:
<input type='text' placeholder='provide a value for field 1'>
</label>
<br><label>Field 2:
<input type='text' placeholder='provide a value for field 2'>
</label>
<br><label>Field 3:
<input type='text' placeholder='provide a value for field 3'>
</label>
</form>
JavaScript with jQuery:
带有 jQuery 的 JavaScript：
jQuery(function($) {
// Is placeholder supported?
if ('placeholder' in document.createElement('input')) {
// Yes, no need for us to do it
display("This browser supports automatic placeholders");
}
else {
// No, do it manually
display("Manual placeholders");
// Set the initial values of the inputs as placeholder text
$('#theForm input').val(function() {
if (this.value.length == 0) {
return $(this).attr('placeholder');
}
});
// Hook up a handler to delete the placeholder text on focus,
// and put it back on blur
$('#theForm')
.delegate('input', 'focus', function() {
if (this.value === $(this).attr("placeholder")) {
this.value = '';
}
})
.delegate('input', 'blur', function() {
if (this.value.length == 0) {
this.value = $(this).attr("placeholder");
}
});
}
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
(Kudos to diveintohtml5.ep.io for the placholderfeature-detection code.)
（感谢diveintohtml5.ep.io 的placholder特征检测代码。）
回答by Ryan
$("input:text").focus(function(){$(this).val("")});
回答by scunliffe
You could try this
你可以试试这个
$('#myFieldID').focus(function(){
$(this).val('');
});
回答by Starx
I am supposing you are trying to create a effect, where the textbox contains a label. And when the user click in the textbox, it disappears and lets the user input the text. You do not require Jquery for this.
我假设您正在尝试创建一个效果，其中文本框包含一个标签。当用户单击文本框时，它会消失并让用户输入文本。为此，您不需要 Jquery。
<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" />
回答by Hrushi
function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); //first submit document.forms["myForm"].reset(); //and then reset the form values } } </script> <body> <form method="get" name="myForm"> First Name: <input type="text" name="input1"/> <br/> Last Name: <input type="text" name="input2"/> <br/> <input type="button" value="Submit" onclick="submitForm()"/> </form>
function submitForm() { if (testSubmit()) { document.forms["myForm"].submit(); //first submit document.forms["myForm"].reset(); //and then reset the form values } } </script> <body> <form method="get" name="myForm"> First Name: <input type="text" name="input1"/> <br/> Last Name: <input type="text" name="input2"/> <br/> <input type="button" value="Submit" onclick="submitForm()"/> </form>
回答by RealMJDev
This worked for me:
这对我有用：
**//Click The Button**
$('#yourButton').click(function(){
**//What you want to do with your button**
//YOUR CODE COMES HERE
**//CLEAR THE INPUT**
$('#yourInput').val('');
});
So first, you select your button with jQuery:
所以首先，你用 jQuery 选择你的按钮：
$('#button').click(function((){ //Then you get the input element $('#input')
//Then you clear the value by adding:
.val(' '); });
回答by Akbar Mirsiddikov
Using jQuery ...
使用 jQuery ...
$('#submitButtonsId').click(
function(){
$(#myTextInput).val('');
});
Using pure Javascript ...
使用纯 Javascript ...
var btn = document.getElementById('submitButton');
btn.onclick = function(){ document.getElementById('myTextInput').value="" };
回答by MaXX
$('.mybtn').on('click',
function(){
$('#myinput').attr('value', '');
}
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="mybtn">CLEAR</button>
<input type="text" id="myinput" name="myinput" value="ааааааааа">回答by Don Zanurano
try this
尝试这个
$("input[name=search-mini]").on("search", function() {
//do something for search
});
