Using jQuery, how can I clear the input text after I made a click? By default, the value remains in the input field.
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.
This question is related to
jquery
To remove the default text, on clicking the element:
$('input:text').click(
function(){
$(this).val('');
});
I would, though, suggest using focus() instead:
$('input:text').focus(
function(){
$(this).val('');
});
Which responds to keyboard events too (the tab key, for example). Also, you could use the placeholder attribute in the element:
<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.
try this
$("input[name=search-mini]").on("search", function() {
//do something for search
});
There is an elegant way to do this:
<input type="text" value="Search" name=""
onfocus="if (this.value == 'Search') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Pesquisa';}"/>
In this way, if you type anything inside the search box, it won't be deleted when click inside the box again.
$('.mybtn').on('click',_x000D_
function(){_x000D_
$('#myinput').attr('value', '');_x000D_
}_x000D_
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<button class="mybtn">CLEAR</button>_x000D_
<input type="text" id="myinput" name="myinput" value="?????????">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:
$('#button').click(function((){ //Then you get the input element $('#input')
//Then you clear the value by adding:
.val(' '); });
If you need placeholder like behavior. you can use this.
$("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('');
});
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>
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.
<input type="text" value="Input Text" onfocus="this.value=''" onblur="(this.value=='')? this.value='Input Text':this.value;" />
I would recommend to use this since I have the same issue which got fixed.
$('input:text').focus(
function(){
$(this).val('');
});
You could try this
$('#myFieldID').focus(function(){
$(this).val('');
});
Update: I took your saying "click" literally, which was a bit dumb of me. You can substitute focus for click in all of the below if you also want the action to happen when the user tabs to the input, which seems likely.
Update 2: My guess is that you're looking to do placeholders; see note and example at the end.
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:
$("#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:
$("#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 delegate to 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.
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:
<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(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 placeholder attribute from 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:
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);
}
});
(Kudos to diveintohtml5.ep.io for the placholder feature-detection code.)
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>
Using jQuery ...
$('#submitButtonsId').click(
function(){
$(#myTextInput).val('');
});
Using pure Javascript ...
var btn = document.getElementById('submitButton');
btn.onclick = function(){ document.getElementById('myTextInput').value="" };
$("input:text").focus(function(){$(this).val("")});
Source: Stackoverflow.com