如何在點擊後清除輸入文字

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