Question

我希望能够在用户点击textarea时弹出div。代码：

CSS：

#comment{
    width: 500px;
    height:500px;
    background-color: black;
    position: fixed;
    left: 250px;
    top: 250px;
    float: left;
    display: none;
}

JS：

function comment() {
            if (document.getElementById('comment').style.display = 'none') {
                document.getElementById('comment').style.display = "inline";
                document.getElementById('container').style.opacity = opacity = 0.1;
            }

        }

HTML：

<input type="text" id="textarea" value="Comment..." style="color: #808080;" onclick="comment();">
<div id="comment"></div>

在阅读下面的3条评论之后，我已经修复了我的问题，但现在我希望div id =“comment”在中间弹出（它有），其后面的一切都消失了。

上面的代码使一切都变得褪色。 div id =“comment”在#container中，但无论如何都要阻止这一切逐渐消失？

Answer 1

您忘记了"的属性值末尾的style。因此，onclick属性名称被视为style属性值的一部分。

如果您使用了a validator，那么这将被取消。

Answer 2

<input type="text" id="textarea" value="Comment..." style="color: #808080; onclick="comment();">

您在style="color: #808080;

后缺少结束语 BTW，这里的代号荧光笔向我指出了这一点。如果您正在使用任何类型的程序员编辑器并使用语法高亮显示，那么它也会向您指出。

Answer 3

您的代码中有很多错误。

“@Quentin提到
您需要使用getComputedStyle来获得实际风格。
document.getElementById('comment').style.display == "";毫无意义。您需要使用=代替==，并且需要指定正确的展示'block'。

代码

function comment() {
    var comment = document.getElementById('comment');
    if (getComputedStyle(comment).display == 'none') {
        comment.style.display = 'block';
    }   
}

http://jsfiddle.net/tarabyte/uvnhtmtv/

如何使用textarea onclick

3 个答案: