Question

我希望<p>标记（或实际上标签可能是正确的）显示在输入字段后面，以便我可以在输入字段上显示活动插入符然后隐藏绝对定位的<p>用户开始输入时标记。

您可以在此处查看问题所在：http://jsfiddle.net/captainill/BG7Kx/

在jsfiddle中，我给输入一个值来说明问题，尽管在解决方案中输入中没有默认文本。

相关的html：

<form name="tagset-form" id="tagset-form" action="" method="get">
            <p class="form-p-text">Add Set Name</p>
            <input id="tagset-name" class="text-input" type="text" value="some text that I would like to be above the <p> tag">
            <input id="tagsubmit" type="submit" value="" style="display:none;">                
        </form>

的CSS：

input#tagset-name{
    width:100%;
    height:14px;
    padding:8px;
    line-height:15px;
    color:black;
    z-index: 2;
}

input:focus#tagset-name{
    color:white;
}
.form-p-text{
    z-index: 1;
    position:absolute;
    top:8px;
    left:180px;
    color:blue;
    font-weight:bold
}

编辑：这个jquery插件完全符合我的要求： http://o2v.net/blog/jquery-formlabels-plugin

它是通过创建一个标签来实现的，当点击它时，会在输入上调用focus（）。它看起来也很清晰。

Answer 1

您可以尝试placeholder的HTML5 <input>属性，具体取决于您希望的支持程度。

http://diveintohtml5.ep.io/forms.html

示例：

<input type="text" placeholder="John Smith" name="full_name" />

否则，您可以查看onblur的{{1}}和onfocus个事件。

Answer 2

问题解释

问题是当你有焦点时在输入字段上设置color:white。这就是为什么插入符号（以及内容值文本）在焦点时消失的原因。它仍然在那里。它只是不可见。如果您输入了一些文字，然后双击input，您会看到已编辑的文字存在（选择它会使其可见）

一种可能的非HTML5脚本方法

您可能想要设置一些初始文本，然后在input有焦点时重置它。之后留下来当用户设置它。 This very simple jsFiddle显示了如何。它使用jQuery来实现所需的行为。您也可以采用它将init文本设置回输入保持为空时的状态。但我的简单例子并没有这样做。通过将blur事件绑定到输入也是相当简单的，这将检查值，当空时删除CSS类并重新设置初始化文本。

它确实使用了一些脚本。我不认为这可以完全由HTML + CSS完成。当input是容器元素时，您可以使用伪元素::before或::after。

HTML <p>标记始终从输入字段中窃取光标</p>

2 个答案:

问题解释

一种可能的非HTML5脚本方法