Question

我有一张用css眨眼的图像。图像看起来像一个光标（各种各样）。它位于textarea上方。当用户单击图像或文本区域时，我希望闪烁的图像消失。到目前为止，事情一直在眨眼。我怎样才能让它停下来好好？

HTML：

<form id="commentsForm">
<div id="textareaWrap">
<img src="img/caret.png" id="blinking_caret" title="blinking caret" />
<textarea id="formStory" placeholder=""></textarea>
</div>
</form>

CSS：

    @keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes blink
{
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
    #textareaWrap {
        position: relative;
    }
        #blinking_caret {
            position: absolute;
            top: 0; left: 0;
            animation: blink 1s;
            animation-iteration-count: infinite;
            -webkit-animation: blink 1s;
            -webkit-animation-iteration-count: infinite;
            z-index: 2;
        }
    #formStory {
        width: 100%;
        border: none;
        background-color: #f1f0f0;
        height: 400px;
        cursor: text;
        outline: none;
    }

jquery的：

$('#formStory').click(function(){
    $('#blinking_cursor').stop( true, true ).fadeOut();
    $("#formStory").attr("placeholder","Start here ...");
});

Answer 1

您在jQuery中使用$('#blinking_cursor')。您的图片ID为#blinking_caret - 更新您的jQuery以选择正确的ID。

如果您只是希望图像消失，只需执行$('#blinking_caret').hide();

即可

Answer 2

为什么甚至使用JavaScript？这可以仅使用CSS来完成。只要textarea具有焦点或具有文本（使用HTML5必需属性），代码（和小提琴）将隐藏插入符号。

这是一个小提琴：http://jsfiddle.net/rgthree/7ePSU/

HTML：

<form id="commentsForm">
    <div id="textareaWrap">
        <textarea id="formStory" required placeholder=""></textarea>
        <span class="caret"></span>
    </div>
</form>

CSS：

#textareaWrap {
    position:relative; width:200px;
}
#textareaWrap textarea {
    position:relative; width:100%; height:100px; z-index:1; font-size:12px;
}
#textareaWrap .caret {
    -webkit-animation: blink 1s steps(1) infinite;
    position:absolute; left:3px; top:2px; z-index:2;
    width:1px; height:1em; background:#000;
}
#textareaWrap textarea:focus + .caret,
#textareaWrap textarea:valid + .caret {display:none;}
@-webkit-keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

注意：您仍需要JavaScript来执行占位符。（您可以像.caret一样对其进行建模，但这不是必需的）。你的问题不是关于占位符，所以我只是告诉你如何完成光标。

Answer 3

保留元素的ID，但通过类应用CSS。您仍然可以快速/绝对选择，但可以在您的点击功能中执行此操作：

$('#blinking_cursor').removeClass('whateverClassName');

+1 Yuriy。完全错过了！

单击时停止css动画闪烁图像

3 个答案: