如何在单击后清除输入文本

使用 jQuery，如何在单击后清除输入文本？默认情况下，该值保留在输入字段中。

例如，我有一个输入文本，值是 TEXT。当我执行单击操作时，我希望输入字段为空。

317525 次浏览
小开

更新: 我把你说的“点击”字面意思理解为“点击”，这有点愚蠢。如果您还希望在用户选择输入时发生操作，那么可以在以下所有内容中用 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属性，只有当你的代码运行在一个不支持它的浏览器上时，你才能做到上面所说的，在这种情况下，你需要反转我上面所用的逻辑:

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>

使用 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);
}


});

现场直播

(为 特征检测代码 diveintohtml5.ep.io 加分，值得称赞。)

小开 
$("input:text").focus(function(){$(this).val("")});
小开
最佳答案

要删除默认文本，请单击元素:

$('input:text').click(
function(){
$(this).val('');
});

不过，我建议改用 focus():

$('input:text').focus(
function(){
$(this).val('');
});

它也响应键盘事件(例如 tab 键)。此外，还可以在元素中使用 placeholder属性:

<input type="text" placeholder="default text" />

它将清除元素的焦点，并在元素保持为空时重新出现/user 没有输入任何内容。

小开

你可以试试这个

$('#myFieldID').focus(function(){
$(this).val('');
});
小开

如果你需要占位符一样的行为。你可以使用这个。

$("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('');
});
小开

我假设您正在尝试创建一个效果，其中文本框包含一个标签。当用户单击文本框时，它将消失，并允许用户输入文本。这不需要 Jquery。

<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" />

演示

小开

有一种优雅的方式可以做到这一点:

<input type="text" value="Search" name=""
onfocus="if (this.value == 'Search') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Pesquisa';}"/>

这样，如果您在搜索框中键入任何内容，当您再次点击搜索框中的内容时，它将不会被删除。

小开 
    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>
小开

试试这个

$("input[name=search-mini]").on("search", function() {
//do something for search
});
小开 

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>

小开

我会建议使用这个，因为我有同样的问题，得到了解决。

$('input:text').focus(
function(){
$(this).val('');
});
小开

这对我很有效:

    **//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(' '); });
小开

使用 jQuery..。

$('#submitButtonsId').click(
function(){
$(#myTextInput).val('');
});

使用纯 Javascript..。

var btn = document.getElementById('submitButton');
btn.onclick = function(){ document.getElementById('myTextInput').value="" };
小开 

  $('.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="ааааааааа">


提交答案