How to clear a textbox using javascript

Question

I have a

<input type="text" value="A new value">

I need a javascript method to clear the value of the textbox when the focus is on the textbox.

How can this be achieved?

score 49 · Answer 1 · answered Nov 09 '10 at 16:11

49

just get element using

   function name()
   {  
   document.getElementById('elementid').value = "";
   }

you can call this function on onfocus event of textbox and clear the value

answered Nov 09 '10 at 16:11

zish

1,112
1
10
17

score 24 · Accepted Answer · answered Nov 09 '10 at 16:13

24

It sounds like you're trying to use a "watermark" (a default value that clears itself when the user focuses on the box). Make sure to check the value before clearing it, otherwise you might remove something they have typed in! Try this:

<input type="text" value="A new value" onfocus="if(this.value=='A new value') this.value='';">

That will ensure it only clears when the value is "A new value".

answered Nov 09 '10 at 16:13

Colin O'Dell

8,386
8
38
75

This solves the problem. however, I have a cancel button which should set the text bac to "A New value". Another javascript method? – kalls Nov 09 '10 at 16:23
2

@Kalls: If that cancel button is a normal ``, then it should do that. – RoToRa Nov 09 '10 at 16:27
RoToRa is correct, a "reset" button should do the trick. If you're using a custom JS function to "cancel", add this code to it: `document.getElementById('IDofthetextbox').value = "A new value";` – Colin O'Dell Nov 09 '10 at 16:57
I have a Jquery method on the cancel button which hides a DIV. How can I write code to identify and set the text of the textbox? – kalls Nov 09 '10 at 17:40
2

@Kalls: You'll need to give the input an ID and put this inside that method: `$('#mytextbox').val('');` where 'mytextbox' is the ID. – Colin O'Dell Nov 09 '10 at 19:24
1

It would make more sense to use the `placeholder` attribute and avoid the need to use JavaScript. – Dan Bray Jul 10 '17 at 18:22

score 11 · Answer 3 · answered May 22 '15 at 18:24

11

For those coming across this nowadays, this is what the placeholder attribute was made to do. No JS necessary:

<input type="text" placeholder="A new value">

answered May 22 '15 at 18:24

G Rice

156
1
4

KeatsKelleher · Answer 4 · 2010-11-09T18:41:11.633

10

<input type="text" value="A new value" onfocus="javascript: if(this.value == 'A new value'){ this.value = ''; }" onblur="javascript: if(this.value==''){this.value='A new value';}" />

edited Nov 09 '10 at 18:41

answered Nov 09 '10 at 16:11

KeatsKelleher

10,015
4
45
52

3

You should really be using the placeholder='' attribute, though – KeatsKelleher Dec 19 '12 at 22:34

score 7 · Answer 5 · answered Jul 16 '13 at 07:50

7

just set empty string

    <input type="text" id="textId" value="A new value">
    document.getElementById('textId').value = '';

answered Jul 16 '13 at 07:50

SwapnilP

137
2
7

Sashi · Answer 6 · 2021-08-21T20:57:09.023

6

Simple one

onfocus="this.value=''" onblur="if(this.value==''){this.value='Search...';}"

edited Aug 21 '21 at 20:57

answered Nov 16 '12 at 20:33

Sashi

686
8
21

1

The 'javascript:' label in the intrinsic events are absolutely unnecessary. – Ilya Streltsyn Jul 16 '13 at 07:58
this is just like a placeholder and optional – Sashi Mar 10 '14 at 00:44
You really don’t need to add JavaScript: – Kingston Fortune Jan 25 '19 at 09:04

score 6 · Answer 7 · answered Jun 11 '13 at 18:11

6

use sth like

<input type="text" name="yourName" placeholder="A new value" />

answered Jun 11 '13 at 18:11

asdf

460
1
10
31

score 5 · Answer 8 · answered Nov 09 '10 at 16:13

5

If using jQuery is acceptable:

jQuery("#myTextBox").focus( function(){ 
    $(this).val(""); 
} );

answered Nov 09 '10 at 16:13

Justin Ethier

131,333
52
229
284

score 3 · Answer 9 · edited Nov 20 '11 at 01:27

3

Give this in input tag of textbox:

onClick="(this.value='')"

edited Nov 20 '11 at 01:27

animuson

53,861
28
137
147

answered Feb 01 '11 at 08:28

Lucky13

11,393
7
25
36

score 2 · Answer 10 · answered Nov 09 '10 at 16:11

2

<input type="text" value="A new value" onfocus="this.value='';">

However this will be very irrigating for users that focus the element a second time e.g. to correct something.

answered Nov 09 '10 at 16:11

RoToRa

37,635
12
69
105

score 2 · Answer 11 · answered Nov 09 '10 at 16:15

2

Use the onfocus and onblur events like this:

<input type="text" name="yourName" value="A new value" onfocus="if (this.value == 'A new value') this.value = '';" onblur="if (this.value == '') this.value = 'A new value';">

answered Nov 09 '10 at 16:15

AlexV

22,658
18
85
122

score 1 · Answer 12 · answered Apr 21 '13 at 07:47

1

<input type="text" name="yourName" value="A new value" onfocus="if (this.value == 'A new value') this.value =='';" onblur="if (this.value=='') alert('Please enter a value');" />

answered Apr 21 '13 at 07:47

Shashank Raj Chavan

89
1
11

score 1 · Answer 13 · answered Feb 20 '14 at 05:01

1

Onfous And onblur Text box with javascript

   <input type="text" value="A new value" onfocus="if(this.value=='A new value') this.value='';" onblur="if(this.value=='') this.value='A new value';"/>

answered Feb 20 '14 at 05:01

Dishan TD

8,528
7
26
41

bunny · Answer 14 · 2017-03-31T05:16:29.797

1

Your HTML code,

jquery code,

$("#textboxID").val('');

edited Mar 31 '17 at 05:16

answered Mar 18 '17 at 09:19

bunny

19
3

1

This is jQuery and not exactly what the question is asking for. – xlm Mar 19 '17 at 01:11

score 0 · Answer 15 · answered Jul 15 '15 at 16:00

For my coffeescript peeps!

#disable Delete button until reason is entered
$("#delete_event_button").prop("disabled", true)
$('#event_reason_is_deleted').click ->
    $('#event_reason_is_deleted').val('')
    $("#delete_event_button").prop("disabled", false)

How to clear a textbox using javascript

15 Answers15

Linked

Related