Javascript 文本输入中的打字机效果在Firefox中不起作用

此代码在输入中生成打字机动画效果。当用户将鼠标悬停在输入上时，它将为占位符文本设置动画。当用户离开时，我希望动画停止，输入返回其原始状态

$（函数（）{
变量输入，
sppInputName=$（“#spp输入名称”），
spputNamePlace=spputName.attr（“占位符”）；
//打字机效应
函数spputStart（elm，n，text）{
如果（n<（文本长度））{
$（elm.attr（'placeholder'，text.substring（0，n+1））；
n++；
SPPINT=setTimeout（函数（）{
spputStart（elm，n，text）；
}, 80);
}
}
功能输入停止（elm，位置）{
clearTimeout（输入）；
$（elm.attr（'占位符'，位置）；
}
//姓名的打字机效应
spputName.mouseover（函数（）{
spputStart（这个，0，spputName.data（'typewriter'）；
});
spputName.mouseout（函数（）{
SPInputStop（此处为SPInputNamePlace）；
});
});
在Firefox中
mouseover
和
mouseout
多次开火。事实上，很多事情都会导致它们重新充电。在这里更改占位符属性可以做到这一点，可能是因为FX在更改某些视觉内容后正在重新计算布局。在其他浏览器中可能存在类似的问题，但您尚未发现

你不能依靠
mouseover
和
mouseout
（或者任何位置事件）只触发一次来启动效果，然后再次停止效果

而是将其设置为输入状态并切换标志：


$（函数（）{
变量输入，
sppInputName=$（“#spp输入名称”），
spputNamePlace=spputName.attr（“占位符”），
InputImating=假；
//打字机效应
函数spputStart（elm，n，text）{
如果（！inputinating）{
setTimeout（函数（）{
spputStart（elm，n，text）；
}, 500);
返回；
}
如果（n<（文本长度））{
$（elm.attr（'placeholder'，text.substring（0，n+1））；
n++；
SPPINT=setTimeout（函数（）{
spputStart（elm，n，text）；
}, 80);
}
}
功能输入停止（elm，位置）{
clearTimeout（输入）；
$（elm.attr（'占位符'，位置）；
}
//姓名的打字机效应
spputName.mouseover（函数（）{
InputImating=真；
});
spputName.mouseout（函数（）{
InputImating=假；
});
spputStart（spputName，0，spputName.data（'typewriter'））；
});
看起来像是更改
占位符
值重新触发
鼠标悬停
事件

一个有效的“黑客”：


$（文档）.ready（函数（）{
变量输入，
sppInputName=$（“#spp输入名称”），
spputNamePlace=spputName.attr（“占位符”）；
//打字机效应
函数spputStart（elm，n，text）{
如果（n<（文本长度））{
$（elm.attr（'placeholder'，text.substring（0，n+1））；
n++；
sppInput=setTimeout（函数（）{
spputStart（elm，n，text）；
}, 80);
}
}
功能输入停止（elm，位置）{
clearTimeout（输入）；
$（elm.attr（'占位符'，位置）；
}
//姓名的打字机效应
spputName.mouseover（函数（）{
//砍
如果（$（this）.data（'flag'）！='1'）{
$（this）.data（'flag'，'1'）；
spputStart（这个，0，spputName.data（'typewriter'）；
}
});
spputName.mouseout（函数（）{
//砍
$（this）.data（'flag'，'0'）；
SPInputStop（此处为SPInputNamePlace）；
});
});

效果不好
你能描述一下这个问题吗。“工作不好”是没有帮助的简单地说，在firefox上不工作。似乎更改占位符值是重新触发mouseover（和mouseenter）事件@JaromandaX我认为“效果很差”在这里有点效果——如果你把它应用到baublery创造的用户体验中……OP说“根本不起作用”——但事实上它确实“起作用”，但很奇怪fashion@JaromandaX我的观点是，很多东西都可以在鼠标上方重新触发，包括页面中影响DOM的其他地方的更改。不要依赖它。试试我在FX中提供的代码片段，它很有效。