Html 输入光标闪烁
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42481586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input cursor that is blinking
提问by Tadej Bogataj
i am having trouble with making the input cursor to blink. How do you make an animation that the cursor "|" inside the input field (placeholder) keeps blinking. The code that i have is this:
我在使输入光标闪烁时遇到问题。你如何制作光标“|”的动画 输入字段（占位符）内一直闪烁。我的代码是这样的：
<input type="text" class="rq-form-element" placeholder="|"/>
I have no idea on how to get this even started. Any suggestions?
我不知道如何开始。有什么建议？
回答by grinmax
Try this solution
试试这个解决方案
<div class="cursor">
<input type="text" class="rq-form-element" />
<i></i>
</div>
CSS
CSS
.cursor {
position: relative;
}
.cursor i {
position: absolute;
width: 1px;
height: 80%;
background-color: gray;
left: 5px;
top: 10%;
animation-name: blink;
animation-duration: 800ms;
animation-iteration-count: infinite;
opacity: 1;
}
.cursor input:focus + i {
display: none;
}
@keyframes blink {
from { opacity: 1; }
to { opacity: 0; }
}
Live demo - https://jsfiddle.net/dygxxb7n/
回答by Chaitali
Just add autofocusattribute. See the link here
只需添加autofocus属性。请参阅此处的链接
<input type="text" class="rq-form-element" autofocus/>
The autofocusattribute is a booleanattribute.
When present, it specifies that an element should automatically get focuswhen the page loads.
该autofocus属性是一个boolean属性。当存在时，它指定一个元素应该focus在page loads.
