我有一个表单，当文本框获得焦点时 (onfocus)，它会使用 javascript 从文本框左侧触发一个 marquee 标记(在本例中为“name”)。但是打开模态后，marquee 标签消失，当文本域再次获得焦点时(onfocus)，marquee 文本不会出现显示。
注意 - 我的代码的选取框功能仅适用于 Mozilla firefox。所以请在 firefox 中尝试代码。
步骤-
- 单击文本框。
- '姓名'使用跑马灯流出。
- 点击“打开模式”。
- “姓名”消失(模式一打开)。
- 关闭模式。
- 再次单击文本框，不会触发选取框文本。
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#vpass{
display:none;
}
</style>
<script>
function anim(field) {
document.getElementById(field).style.display = "block";
}
</script>
</head>
<body>
<a href="#" data-toggle="modal" data-target="#modall">Open Modal</a>
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>谢谢
最佳答案
请注意 <marquee> is an obsolete HTML5 element它的用法是discouraged by W3C Standards :
The
<marquee>element is a non-standard element. HTML5 classifies it as a non-conforming feature.
你不应该使用 <marquee> 的原因这是因为您不能保证浏览器的支持。 Can I Use 也鼓励此建议.
您最好使用 CSS3 动画或 JavaScript 为文本添加动画效果。 This question has some good sources关于如何模拟 <marquee>行为。
关于触发模式时，启用 Javascript 的 css 更改消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37597584/