如何在点击后清除输入文字

Question

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

例如，我有一个输入文本，值为TEXT。当我点击时，我希望输入字段变空。

Answer 1

要删除th Ë默认的文本，在点击元素：

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

我会，不过，建议使用focus()代替：

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

这是为了响应键盘事件太（tab键，例如）。此外，您可以在元素使用placeholder属性：

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

这将清除元素的焦点，而重新出现，如果该元素为空/用户不输入任何东西。

Answer 2

更新：我从字面上理解了“点击”，这对我来说有点愚蠢。如果您还希望在用户选中输入时发生该操作（可能性很大），则可以用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> 

JavaScript的jQuery的：

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"); 
     } 
    }); 

}); 

Live copy

当然，你也可以使用从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与jQuery：（荣誉给diveintohtml5.ep.io为placholder feature-detection code）

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

}); 

Live copy

Answer 3

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

Answer 4

如果需要占位样的行为你可以试试这个

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

Answer 5

。你可以使用这个。

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

Answer 6

我想你正在尝试创建一个效果，其中的文本框包含一个标签。当用户点击文本框时，它会消失，并让用户输入文本。你不需要Jquery。

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

Demo

Answer 7

有一种优雅的方式来做到这一点：

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

这样，如果你键入搜索框里面任何东西，它不会被点击时，里面删除箱子再次。

Answer 8

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> 

Answer 9

试试这个

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

Answer 10

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> 

Answer 11

我建议，因为我有一个固定得到了同样的问题，使用此。

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