Question

好的，所以我尝试在输入字段中显示焦点上的文本到目前为止我所做的就是这个。

HTML

<form>
                <span id="name">
                Name : <input type="text" class="name" name="name" title="lust"/><br />
                <span>ENTER NAME</span>
                </span>
                <span id="mail">
                E-mail : <input type="text" class="mail" name="mail" /><br />
                <span>ENTER NAME</span>
                </span>
                <input type="submit" class="button" />
            </form>

CSS

#forms {
    position: relative;
}

#name span, #mail span {
    display: none;
}

input[type='text']{
    border: 1px solid #008008;
    border-radius: 5px;
    background: #f1f1f1;
    padding: 10px;
    margin-bottom: 10px;
}

input[type='text']:focus {
    background: #fff;
    border: 1px solid #008080;
}

.assistant {
    position: abosolute;
    top: 0px;
}

任何人都可以帮助我实现这个目标吗？我做错了或者我走的是正确的道路吗？如果有人真的帮助我，我会很高兴。

就像单击输入字段时的工具提示一样。

Answer 1

好的，我会建议你jQuery.tipsy！另外我会说你需要改变你的标记。试试这个，让我知道它是否适合你。

$(document).ready(function () {
    $('label input').tipsy({
        gravity: 'w',
        trigger: 'focus'
    });
});

html, body, body * {
	font-family: Segoe UI, sans-serif;
}

/* -- forms -- */
#forms {
	position: relative;
}

#name span, #mail span {
	display: none;
}

input[type='text']{
	border: 1px solid #008008;
	border-radius: 5px;
	background: #f1f1f1;
	padding: 10px;
	margin-bottom: 10px;
}

input[type='text']:focus {
	background: #fff;
	border: 1px solid #008080;
}

#name span.assistant, #mail span.assistant {
	position: abosolute;
	top: 0px;
    display: block;
}

form {display: block;}
form ul, form ul li {display: block; list-style: none; margin: 0; padding: 0;}
form ul li strong {display: inline-block; width: 100px; text-align: right; margin-right: 10px;}
form ul li.submit {padding-left: 115px;}
form ul li .button {display: inline-block; padding: 10px 15px; cursor: pointer; border: 1px solid #ccf; cursor: pointer; border-radius: 5px; background-color: #0ff; font-weight: bold;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css" />
<div id="forms">
    <form>
        <ul>
            <li><label><strong>Name:</strong> <input type="text" class="name" name="name" title="Enter Name" /></label></li>
            <li><label><strong>E-mail:</strong> <input type="text" class="mail" name="mail" title="Enter e-Mail" /></label></li>
            <li class="submit"><input type="submit" class="button" /></li>
        </ul>
    </form>
</div>

更改CSS，并记下<form>标记内的标记。

Answer 2

理解你想要的东西并不是那么清楚。我想你想在没有内容的情况下在输入框上显示“输入名称”文字。

如果是这种情况，请尝试在输入元素上使用placeholder属性。

Answer 3

不需要任何JavaScript，仅使用CSS就可以实现。您需要使用否定伪类:not()和相邻的兄弟选择器+来隐藏span时input没有聚焦，如下所示：

input[type=text]:not(:focus)+span{
    display:none;
}

我想在点击输入

3 个答案: