Question

我正在努力实现Square's website上的文字输入。基本上，其中包含<label>的输入。当您在其中单击时，文本变得更轻，当您开始键入时，它会消失。我以前发现了一个片段，但由于它是position:absolute;，它最终搞砸了我的设计。

Answer 1

这是解决您问题的jsfiddle。我绝对定位标签元素，然后相对定位字段元素，这使其在堆叠顺序中略高。将字段背景设置为透明，并添加一些jQuery以侦听焦点事件。的Bam

（编辑：哎呀，当你在场上输入内容时我没有保持焦点效果）

Answer 2

这就是所谓的水印。有一些jQuery插件可用于此。

Answer 3

这是一个不使用CSS的jsfiddle ：

<!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>

Answer 4

Square也在使用HTML5，并添加了输入标签

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

然后在键入框后更改颜色，使用伪类：focus

.input {
      color:#999999;
}

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

在Squareup.com上输入

4 个答案: