CODEWITHSUNDEEP
htmlcssforms
Al Kush
Al Kush

Reputation: 288

Auto delete the input value

For example, I have a text input with a value of "insert text here" like this:

 <input type="text" value="insert text here" />

When I click on the block of the input, then the text of "insert text here" will automatically disappear, but when the user cancel to write something there, the text will appear again.

How to do this?

Thanks

Upvotes: 1

Views: 5818

Answers (7)

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

USE placeholder attribute
<input name="" type="text" placeholder="place holder text here."/>

but it may not work in older browser. if you are for older browser as well than you should use javascrip/jquery for dealing with this problem.

<input type="text" class="userName" value="Type User Name..." />


$(document).ready(function(){

    $('.userName').on('focus',function(){
    var placeHolder = $(this).val();
        if(placeHolder == "Type User Name..."){
            $(this).val("");
        }
    });
    $('.userName').on('blur',function(){
    var placeHolder = $(this).val();
        if(placeHolder == ""){
            $(this).val("Type User Name...");
        }
    });

});

see deme JSFIDDLE

Upvotes: 1

Websolutionexpert24
Websolutionexpert24

Reputation: 56

If you want compatible in all browsers then you can use this code.
<!DOCTYPE html>
<html>
<body>

First Name: <input type="text" id="myText" placeholder="Name">

<p>Click the button to display the placeholder text of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myText").placeholder;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Upvotes: -1

HEEN
HEEN

Reputation: 4727

You can achieve this using Placehoder but u need to be aware of Older versions of browsers, because it doesn't supports the place hoder

 <input type="text" value="some text"  placeholder="insert text here"/>

for older versions of browser u can use the below link and download the js

link

Upvotes: 0

Dale
Dale

Reputation: 169

use a placeholder instead of value.

    <input type="text" placeholder="insert text here" />

Upvotes: 0

nsteenv
nsteenv

Reputation: 314

You need to use the "placeholder" attribute like so:

 <input type="text" placeholder="insert text here" />

The placeholder text will be automatically deleted when typing something in the field

http://www.w3schools.com/tags/att_input_placeholder.asp

Upvotes: 0

Wizard
Wizard

Reputation: 11295

<input type="text" name="fname" placeholder="insert text here">

Upvotes: 0

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

Use this placeholder attribute

<input type="text" placeholder="insert text here" />

Upvotes: 1

Related Questions