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 cl开发者_Go百科ick 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.
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)
That's known as a watermark. There are a few jQuery plugins available for that.
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;
}
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>
加载中,请稍侯......
精彩评论