CODEWITHSUNDEEP
javascriptcss
Edvard
Edvard

Reputation: 475

Inputs like on Squareup.com

I'm trying to achieve text inputs like those on Square's website. Essentially, inputs that have the <label> in them. When you click inside of it, the text becomes lighter and when you start typing, it disappears. I previously found a snippet but since it was position:absolute;, it ended up screwing my design.

Upvotes: 1

Views: 282

Answers (4)

Ronnie
Ronnie

Reputation: 11198

Here is a jsfiddle that doesn't use CSS :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<script>

function focusMe(who)
{
    if (who.value == "my label")
    {
        who.value = "";
    }
}

function blurMe(who)
{
    if (who.value == "")
    {
        who.value = "my label";
    }
}
</script>
</head>
<body>
    <input type="text" value="my label" onfocus="focusMe(this)" onblur="blurMe(this)"/>
</body>
</html>

Upvotes: 0

Kelly Taylor
Kelly Taylor

Reputation: 68

Square is using HTML5 as well, with the input tag they add 

<input class=".input" placeholder="Whatever it should say prior to the click">

Then to change the color once the box is typed into, use the pseudo class :focus

.input {
      color:#999999;
}

/* This will give you the change of color */
.input:focus {
      color:#000000;
}

Upvotes: 0

Nick Husher
Nick Husher

Reputation: 1884

Here's a jsfiddle that solves your problem. I'm absolutely positioning the label element, then relatively positioning the field element, which puts it slightly higher in the stacking order. Set the field background to transparent, and add some jQuery to listen for focus events. Bam.

(edit: oops, I didn't keep the focus effect when you enter stuff into the field)

Upvotes: 2

Antony Scott
Antony Scott

Reputation: 21996

That's known as a watermark. There are a few jQuery plugins available for that.

Upvotes: 0

Related Questions