javascript - make placeholder text reappear when no text is in the input field - Stack Overflow

admin管理员组

文章数量:1324828

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 = " ";
}

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 = " ";
}

• javascript

Share Improve this question Follow asked Feb 5, 2015 at 2:52 user2856111user2856111 20522 gold badges44 silver badges1111 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

The easiest way to do it:

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

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/trex005/7z957rh2/

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.

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;
}}

本文标签： javascriptmake placeholder text reappear when no text is in the input fieldStack Overflow