Div opacity=0 仅当我在文本字段中输入内容时

Question

我有一个文本字段和一个解释 div。我可以解释 div 仅当我在文本字段中键入内容时不透明度 = 0 吗？在此先感谢您的帮助。这是 HTML 代码：

<input type='text' name='input' id="searchdevice" class="search-field"  placeholder="" autofocus/>

<div id="explain">
            Search your device in the text field
            </div>

Answer 1

你可以试试：

$('#searchdevice').on('input', function(){
    $('#explain').css('opacity', 0);
});

Answer 2

这将需要 JavaScript 来监听文本输入并隐藏 DIV。

使用 jQuery 的示例：

$('#searchdevice').on('input', function(){
    $('#explain').addClass('hidden');
});

css:

.hidden {
    opacity: 0;
}

工作fiddle：http://jsfiddle.net/spanndemic/kphgg2d0/

Answer 3

是的，javascript 在这里很好，功能保留在它所属的地方，响应 css 中的事件是有问题的做法。您需要 keypress 事件 来打字。单独定义的功能使它们更容易重用。

var hideExplain = function() {
    document.getElementById('explain').style.opacity='0';
}

document.getElementById('searchdevice').addEventListener("keypress", hideExplain);

see keypress example here

您最好这样做，因为 focus 和 blur 将允许您在用户继续移动时撤消效果。这里也有一个显示功能。

var showExplain = function() {
    document.getElementById('explain').style.opacity='1';
}

document.getElementById('searchdevice').addEventListener("focus", hideExplain);
document.getElementById('searchdevice').addEventListener("blur", showExplain);

see the example here

您可以使用按键移除提示并模糊以重新显示它，这样提示会尽可能长时间地停留在用户身上。 See anothe example

此外，您会发现 添加和删除类 更好 - 这是 JQuery 的示例。现在您的样式类也可以重复使用了。

CSS

.is-transparent {
    opacity: 0;
}

.is-opaque {
    opacity: 1;
}

JQuery

$('#explain').removeClass('is-opaque').addClass('is-transparent');

Answer 4

如果您将输入设置为 required:

，则只需 CSS 即可完成

<input type='text' name='input' id='searchdevice' class='search-field' required='required' autofocus />

<div id='explain'>
    Search your device in the text field
</div>

CSS:

/* Show by default */
#explain {
    opacity: 1;
}

/* Hide it when input field has content */
#searchdevice:valid + #explain {
    opacity: 0;
}

/* Remove "invalid" styling when input field is empty.
E.g. in Firefox, the input has a red box-shadow by default. */
#searchdevice:invalid {
    box-shadow: none;
}

当您在输入字段中键入内容时，它是 "valid" 并且 #explain 的不透明度为 0。

浏览器对 :valid 选择器的支持：http://caniuse.com/#feat=form-validation

演示：https://jsfiddle.net/2ozh40vp/1/

Answer 5

您只需要 css 行：

input:focus + #explain{opacity:0}

http://jsfiddle.net/kLLkyvyh/

Answer 6

您可以使用此代码：

<html>
<head>
    <title>Some title</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function(){
            $('#searchdevice').blur(function(){
                $('#explain').fadeTo(1000, 0);
            });
        });
    </script>
</head>
<body>
<input type='text' name='input' id="searchdevice" class="search-field" placeholder="" autofocus/>
<div id="explain">Search your device in the text field</div>
</body>
</html>

在这里您可以通过 fadeto 从 link - http://api.jquery.com/fadeTo/

尝试各种效果

Div opacity=0 仅当我在文本字段中输入内容时

Div opacity=0 only when I type something in text-field

html

opacity