css / javascript形式onfocus占位符文本仍然在那里，打字消失 [英] css/javascript form onfocus placeholder text still there, on typing disappear

问题描述

我只是想弄清楚如何制作一个表单，如www.tumblr.com。 onFocus的占位符保留在输入框中，但是当打字开始占位符文本消失。我知道如何做的onFocus通过另一个教程发现这里，但我想知道他们如何保持背景文本onFocus但只改变它打字。

I'm just trying to figure out how to make a form like www.tumblr.com. onFocus the placeholder remains in the input box, but when typing begins the placeholder text disappers. I know how to do the onFocus through another tutorial found here, but I was wondering how they keep that background text onFocus but only change it on typing.

推荐答案

p>他们没有使用onFocus技巧来改变文本。实际上，它们在一个单独的相对定位的块元素内层叠两个绝对定位的块元素。

They aren't using the onFocus trick to change the text. They are, in fact, layering two absolutely positioned block elements within a separate relatively positioned block element.

然后，他们等待onKeyUp或一些类似的事件，标签元素。

Then, they wait for onKeyUp or some similar event, and hide the "label" element.

如果在Firefox中使用Firebug，那么查看创建效果的节点和CSS很简单。它看起来像这样：

If you use Firebug in Firefox, it's trivial to see the nodes and CSS that create the effect. It looks something like this:

HTML

<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 */
}

你需要风格和调整这些元素，使他们看起来漂亮。此外，请注意，他们已经足够聪明，可以将标签放在第一位 - 以便屏幕阅读器仍然能以正确的顺序查看内容。

You'll need to style and tweak these elements to make them look pretty. Also, note that they were smart enough to put the label first - so that screen readers still see the content in the correct order.

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

Then you need to add the JS to add and remove the input_wrapper_focus/notempty classes on change and keyUp for the input field, which depends on your JavaScript library or non-library decisions.

这篇关于css / javascript形式onfocus占位符文本仍然在那里，打字消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！