在 HTML 中模拟闪烁的文本光标
Simulate a flashing text cursor in HTML
在
HTML中插入闪烁的光标(例如DOS中闪烁的粗下划线或Linux中的垂直条)的好方法是什么?
此字符/图像将尾随 H1 标头,并且在不同大小下看起来不错。
你可以只用CSS来做到这一点,这里是垂直条Fiddle
h1 {
font-size: 20px;
padding-right: 20px;
display: inline-block;
}
h1:after {
content: '';
width: 20px;
height: 2px;
background: black;
opacity: 0;
display: inline-block;
animation: blink 1s linear infinite alternate;
}
@keyframes blink {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1>Lorem ipsum dolor sit amet</h1>
或者你可以使用JQuery和setInterval
setInterval(function() {
$('span').animate({
opacity: 1
}, 600).animate({
opacity: 0
}, 600)
}, 1200);
h1 {
font-size: 20px;
padding-right: 20px;
display: inline-block;
}
h1 span {
width: 20px;
margin-bottom: -1px;
height: 2px;
background: black;
opacity: 0;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Lorem ipsum dolor sit amet <span></span></h1>
你不能使用几个代码来做到这一点没有库可以执行此操作。您可以使用 js 制作假光标。
步骤 1
隐藏主诅咒
,caret-color: transparent;
步骤 2
创建范围元素
<input type="text"><span id="fake">_</span>
步骤 3
使用 js 使 span 元素闪烁
只在 HTML 元素上使用 contenteditable 属性怎么样?
它只有在用户单击元素时才有效,但随后它可以"免费"工作,没有任何 JS 或 CSS 等。
例:
<h1 contenteditable="true">Edit me</h1>
相关文章:
- 将文本插入光标所在的文本区域
- 无法在Chrome控制台中使用javascript将焦点和光标设置为输入文本
- jQuery/Javascript>on单击将文本放置在最后一个已知的光标位置
- 当用户单击按钮(在光标位置)时,在输入字段中添加一个文本字符串
- 如何在按键事件发生后获取文本光标的位置
- 同时在两个文本框上显示光标
- 我可以通过javascript在鼠标光标旁边动态添加文本吗?
- 将光标放在 javascript 文本框的末尾
- 如何使文本字段中的文本光标以几像素开始
- 在 HTML 中模拟闪烁的文本光标
- 设置文本光标在文本区域中的位置
- 如何获取文本光标在屏幕上的像素位置
- 用自定义字符替换闪烁的文本光标
- 如何覆盖活动的文本光标(Safari)
- 删除要使用Jquery输入的文本光标
- 输入文本字段文本光标未出现
- 当按下向上箭头键时,将文本光标发送到文本框焦点的末尾
- 在HTML文档上显示闪烁文本光标
- 可以知道文本光标在输入字段中的位置
- Canvas onmousedown导致文本光标,无论我使用什么CSS