Css /javascript表单onfocus占位符文本仍然在那里，在键入消失

css/javascript form onfocus placeholder text still there, on typing disappear

本文关键字：在那里 消失 javascript 表单 onfocus 文本 占位符 Css      更新时间：2023-09-26

我只是想弄清楚如何使窗体像www.tumblr.com。onFocus占位符保留在输入框中，但当输入开始时，占位符文本消失。我知道如何做onFocus通过另一个教程找到这里，但我想知道他们如何保持背景文本onFocus，但只改变它的输入。

他们没有使用onFocus技巧来改变文本。事实上，它们是在一个独立的相对定位的块元素中分层两个绝对定位的块元素。

然后，他们等待onKeyUp或一些类似的事件，并隐藏"label"元素。

如果您在Firefox中使用Firebug，那么查看创建该效果的节点和CSS并不重要。它看起来像这样:

<div class="input_wrapper">
    <label for="user_email">Email</label>
    <input type="text" id="user_email" name="user_email" />
</div>
CSS

.input_wrapper {
    position: relative;
}
.input_wrapper label {
    position: absolute;
    top: 2px;
    left: 5px;
    z-index: 1; /* stack below input */
}
.input_wrapper_focused label {
    /* style label for focused input */
}
.input_wrapper_notempty label {
    visibility: hidden;
}
.input_wrapper input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* stack above input */
}

你需要样式和调整这些元素，使他们看起来漂亮。另外，请注意，他们很聪明地把标签放在前面——这样屏幕阅读器仍然可以按照正确的顺序看到内容。

然后你需要添加JS来添加和删除输入字段的change和keyUp上的input_wrapper_focus/notempty类，这取决于你的JavaScript库或非库决定。

相关文章：