How can I clear the input text after clicking

Question

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

User · Answer

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;" />

Demo

User · Answer

I would recommend to use this since I have the same issue which got fixed       input text   focus      function              this  val

User · Answer

function submitForm         if  testSubmit                  document forms  myForm   submit      first submit         document forms  myForm   reset      and then reset the form values          lt  script gt   lt body gt   lt form method  get  name  myForm  gt       First Name   lt input type  text  name  input1   gt       lt br  gt      Last Name   lt input type  text  name  input2   gt       lt br  gt       lt input type  button  value  Submit  onclick  submitForm     gt   lt  form gt

User · Answer

There is an elegant way to do this    lt input type  text  value  Search  name            onfocus  if  this value     Search    this value                 onblur  if  this value         this value    Pesquisa      gt    In this way  if you type anything inside the search box  it won t be deleted when click inside the box again

User · Answer

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

User · Answer

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    lt form id  theForm  gt     lt label gt Field 1       lt input type  text  value  provide a value for field 1  gt     lt  label gt     lt br gt  lt label gt Field 2       lt input type  text  value  provide a value for field 2  gt     lt  label gt     lt br gt  lt label gt Field 3       lt input type  text  value  provide a value for field 3  gt     lt  label gt   lt  form gt    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                           Live copy  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    lt form id  theForm  gt     lt label gt Field 1       lt input type  text  placeholder  provide a value for field 1  gt     lt  label gt     lt br gt  lt label gt Field 2       lt input type  text  placeholder  provide a value for field 2  gt     lt  label gt     lt br gt  lt label gt Field 3       lt input type  text  placeholder  provide a value for field 3  gt     lt  label gt   lt  form gt    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            lt p gt    html msg  appendTo document body              Live copy   Kudos to diveintohtml5 ep io for the placholder feature-detection code

User · Answer

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

User · Answer

Using jQuery          submitButtonsId   click      function               myTextInput  val                Using pure Javascript      var btn   document getElementById  submitButton    btn onclick   function    document getElementById  myTextInput   value

User · Answer

input text   focus function     this  val

User · Answer

enter code here lt form id  form  gt   lt input type  text  gt  lt input type  text  gt  lt input type  text  gt    lt input type  button  id  new  gt   lt  form gt   lt form id  form1  gt   lt input type  text  gt  lt input type  text  gt  lt input type  text  gt    lt input type  button  id  new1  gt   lt  form gt   lt script type  text javascript  gt    document  ready function e            new   click  function              alert  fegf            form input   val                         new1   click  function              alert  fegf            form1 input   val                   lt  script gt

User · Answer

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    lt input type  text  placeholder  default text    gt    Which will clear on focus of the element  and reappear if the element remains empty user doesn t input anything

User · Answer

x000D   x000D        mybtn   on  click   x000D        function    x000D                myinput   attr  value        x000D          x000D       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D     lt button class  mybtn  gt CLEAR lt  button gt  x000D     lt input type  text  id  myinput  name  myinput  value             gt  x000D   x000D   x000D

User · Answer

try this     input name search-mini    on  search   function        do something for search

User · Answer

You could try this      myFieldID   focus function        this  val

[jquery] How can I clear the input text after clicking

Examples related to jquery