clear text input by clicking on it

Question

I've got input with text type. I want to clear it when I click on it. However my approach does not work

<span class="input"><input type="text" id="input1" onclick="clear()"></span>

Where clear() function is

function clear() {
    alert(event.target.id);
    event.target.value = "";
}

What is the correct way?

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

function name clear does not seem to be working. Change the function name (say, clearMe) and try (Fiddle):

<script>
    function clearMe(x) {
    x.value = "";
}
</script>
<span class="input">
   <input type="text" id="input1" onclick="clearMe(this);" value="abcd" />
</span>

For a single line:

<input type="text" id="input1" onclick="this.value='';" value="abcd" />

edited May 23 '17 at 12:21

Community

1
1

answered Oct 12 '13 at 12:33

Kaf

33,101
7
58
78

ComFreek · Answer 2 · 2013-10-12T12:36:40.813

The problem is that there is a function document.clear() which is actually called instead of yours!

In this case, you will also see a warning in Google Chrome because the function is deprecated:

document.clear() is deprecated. This method doesn't do anything.
— Google Chrome v30

Choose another name:

function clearA(obj) {
  obj.value = "";
}

<input type="text" id="input1" onclick="clearA(this);" />

Or use real event listeners (which should be the preferred way!):

document.getElementById("input1").addEventListener("click", function () {
  this.value = "";
};

clear text input by clicking on it

2 Answers2