CODEWITHSUNDEEP
javascript
user2856111
user2856111

Reputation: 205

make placeholder text reappear when no text is in the input field

I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?

Below is the code I have below. I tried

document.text.value = "hello";

but the text "hello" stays in the box when I start typing.

HTML

<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>

Javascript

function(clearText) {
 document.text.value = " ";
}

Upvotes: 0

Views: 10136

Answers (5)

James White
James White

Reputation: 1

You should not forget to set "return false;" 

document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;

            if (key === 13) {

                    var text        = this.value;
                    var object      = document.getElementById('username_interface'); 
                    email           = object.email;
                    username        = object.username;
                    empty           = /^\s+$/;

// function Send Message

                    this.value      = "";

                    return false;

            }else{
                    return true;
}}

Upvotes: 0

Bardh Lohaj
Bardh Lohaj

Reputation: 1410

When the text field is empty, the placeholder will reappear automatically.

When the clear button is clicked, you can use onclick attribute on the button and define the function like this:

Implementation with pure JS:

<script>
    function clearText() {
        // we use getElementById method to select the text input and than change its value to an empty string 
        document.getElementById("my_text").value = "";
    }        
</script>

<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

Or you can use jQuery:

<script>
    function clearText() {
         $("#my_text").val("");
    }        
</script>

<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

Upvotes: 3

e-neko
e-neko

Reputation: 1266

There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification. However, you were on the right way, and code below does the trick:

<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">

However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:

<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">

and use "text2" and so on for other fields.

Upvotes: 0

trex005
trex005

Reputation: 5115

You were very close

HTML :

<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>

JavaScript :

clearText = function(){
 document.getElementById('theText').value = "";
}

Demo : http://jsfiddle.net/trex005/7z957rh2/

Upvotes: 1

gabor.harsanyi
gabor.harsanyi

Reputation: 599

The easiest way to do it:

<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>

Upvotes: 2

Related Questions