使用jQuery，如何在点击后清除输入文本？默认情况下，该值保留在输入字段中。
例如，我有一个输入文本，值为TEXT。当我执行单击时，我希望输入字段变空。
答案 0 :(得分：134)
要删除默认文本，请单击元素：
$('input:text').click(
function(){
$(this).val('');
});
我会建议改为使用focus()：
$('input:text').focus(
function(){
$(this).val('');
});
它也响应键盘事件（例如tab键）。此外，您可以在元素中使用placeholder属性：
<input type="text" placeholder="default text" />
这将清除元素的焦点，并在元素保持为空/用户不输入任何内容时重新出现。
答案 1 :(得分：10)
更新：我从字面上理解了你的“点击”，这对我来说有点愚蠢。如果您还希望在用户选中输入时执行此操作，则可以将focus替换为以下所有内容中的click。
更新2：我的猜测是你想做占位符;最后看注释和例子。
原始回答：
你可以这样做：
$("selector_for_the_input").click(function() {
this.value = '';
});
...但是无论它是什么，这都将清除文本。如果您只想清除它，如果它是特定值：
$("selector_for_the_input").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
例如，如果输入有id，您可以执行以下操作：
$("#theId").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
或者如果它是带有id的表单（例如“myForm”），并且您希望为每个表单字段执行此操作：
$("#myForm input").click(function() {
if (this.value === "TEXT") {
this.value = '';
}
});
你也可以通过授权来做到这一点：
$("#myForm").delegate("input", "click", function() {
if (this.value === "TEXT") {
this.value = '';
}
});
使用delegate挂钩表单上的处理程序，但将其应用于表单上的输入，而不是将处理程序连接到每个单独的输入。
如果您正在尝试使用占位符，那么还有更多内容，您可能希望找到一个好的插件来执行此操作。但这是基础知识：
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>
使用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");
}
});
});
当然，您也可以使用HTML5中的新placeholder attribute，如果您的代码在不支持它的浏览器上运行，则只执行上述操作，在这种情况下您要反转我使用的逻辑以上：
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(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);
}
});
（感谢placholder feature-detection code的diveintohtml5.ep.io。
答案 2 :(得分：3)
$("input:text").focus(function(){$(this).val("")});
答案 3 :(得分：2)
你可以试试这个
$('#myFieldID').focus(function(){
$(this).val('');
});
答案 4 :(得分：2)
我假设您正在尝试创建一个效果，其中文本框包含标签。当用户单击文本框时，它会消失并让用户输入文本。你不需要Jquery。
<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" />
答案 5 :(得分：1)
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>
答案 6 :(得分：1)
这对我有用：
**//Click The Button**
$('#yourButton').click(function(){
**//What you want to do with your button**
//YOUR CODE COMES HERE
**//CLEAR THE INPUT**
$('#yourInput').val('');
});
因此，首先，您使用jQuery选择按钮：
$('#button').click(function((){ //Then you get the input element $('#input')
//Then you clear the value by adding:
.val(' '); });
答案 7 :(得分：1)
使用jQuery ...
$('#submitButtonsId').click(
function(){
$(#myTextInput).val('');
});
使用纯Javascript ...
var btn = document.getElementById('submitButton');
btn.onclick = function(){ document.getElementById('myTextInput').value="" };
答案 8 :(得分：0)
如果你需要像占星一样的行为。你可以用它。
$("selector").data("DefaultText", SetYourDefaultTextHere);
// You can also define the DefaultText as attribute and access that using attr() function
$("selector").focus(function(){
if($(this).val() == $(this).data("DefaultText"))
$(this).val('');
});
答案 9 :(得分：0)
有一种优雅的方法可以做到这一点：
<input type="text" value="Search" name=""
onfocus="if (this.value == 'Search') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Pesquisa';}"/>
通过这种方式，如果您在搜索框中输入任何内容，则再次在框内单击时不会删除它。
答案 10 :(得分：0)
试试这个
$("input[name=search-mini]").on("search", function() {
//do something for search
});
答案 11 :(得分：0)
$('.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="ааааааааа">
答案 12 :(得分：-1)
我建议使用它，因为我有同样的问题得到修复。
$('input:text').focus(
function(){
$(this).val('');
});
答案 13 :(得分：-2)
enter code here<form id="form">
<input type="text"><input type="text"><input type="text">
<input type="button" id="new">
</form>
<form id="form1">
<input type="text"><input type="text"><input type="text">
<input type="button" id="new1">
</form>
<script type="text/javascript">
$(document).ready(function(e) {
$("#new").click( function(){
//alert("fegf");
$("#form input").val('');
});
$("#new1").click( function(){
//alert("fegf");
$("#form1 input").val('');
});
});
</script>