我正在构建一个包含正在运行的动画的Web应用程序,该动画可以再现非可移植marquee
元素的行为。我正在使用http://jscroller2.markusbordihn.de/来解决这个问题,但问题的根本原因似乎并不直接与库本身有关(它只是暴露问题的触发器)。
具体问题如下:
我有一个html form
,其中包含用户必须填写的多个input
文本字段。 marquee
动画每隔X毫秒运行一次(其中X小于1秒)。每当文本字段被聚焦时(用户点击它就意图填写它),文本光标不会闪烁(应该如此)并永久保持条形(作为|
标志 - 请原谅我语言...... :-))。
我已将违规代码删除至最低限度,您可以在此处试用:http://jsfiddle.net/kyVqk/。
要进行测试,只需按Start
按钮,然后单击文本字段即可。每次动画运行时,点应该附加到输入文本下面的标签上,光标不应该闪烁(这就是问题)。请注意,如果动画以大于1秒的时间间隔运行,则不会发生这种情况(您可以在之前的小提琴中测试)并且光标按预期闪烁。这让我相信问题在于浏览器在更新过程中执行文本渲染和非聚焦/重新聚焦字段的方式。
此问题特定于Internet Explorer(至少在版本6中),因为其他主要浏览器(Firefox和Chrome)不会出现此行为。我已尝试直接通过DOM的对象innerHTML
更新标签,但没有成功。改变的确切内容也不重要。如果动画仅从元素中读取属性,则问题不会出现(仅在更新元素的属性时 - 任何属性)。
由于我正在开展的项目具有较高的知名度和客户曝光率,因此客户不愿意让这一点通过。有人可以解释为什么会这样吗?是否有解决方法(在动画之前/之后附加/分离DOM中的元素,在动画之后重新聚焦等)?请注意,失去marquee
效果不是一种选择。