我在我的网站上使用Typed.js循环浏览一堆关于志愿服务的名言。当我看到它在运行时,一切都在按照它应该的方式运行。直到用分号引完为止。当它输入它时,一切都很好,但当它取消键入它时,它会正常地取消键入它,直到它到达分号。当它到达分号时,它只是完全删除了整行,而不是继续取消键入的动画。
这是我的代码:
var data = {
strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it’s the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else’s help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"],
typeSpeed: 40,
backSpeed: 20,
shuffle: true,
loop: !0
};
new Typed('.animated-text', data);
这里有一个小视频来证明这一点:
https://im3.ezgif.com/tmp/ezgif-3-425cf91d8c.gif
正如你在gif中看到的,带分号的引号可以很好地键入,但当它后退空格或取消键入时,它不会取消键入,直到分号,并删除行。当它出现在下一个引号上时,一个没有分号的引号,它可以键入和取消键入。
我的问题是为什么会发生这种情况,以及如何解决这个问题。
谢谢!感谢您的回复!
您可以通过将分号编码为html实体变体;
来解决此问题
这是因为typed.js
看到一个分号,并试图将该分号之前的字符解析为html实体,并且由于没有与号来指示此类html实体的开始,它会删除字符串的其余部分
符号和半符号(错误地(解析为html实体的示例
您的示例
var data = {
strings: ["“<i>As you grow older, you will discover that you have two hands — one for helping yourself; the other for helping others.</i>” — Audrey Hepburn", "“<i>Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it’s the only thing that ever has.</i>” – Margaret Mead", "“<i>The best way to find yourself is to lose yourself in the service of others.</i>” – Gandhi", "“<i>Volunteering is at the very core of being a human. No one has made it through life without someone else’s help.</i>” – Heather French Henry", "“<i>Volunteerism is the voice of the people put into action. These actions shape and mold the present into a future of which we can all be proud.</i>” – Helen Dyer"],
typeSpeed: 40,
backSpeed: 20,
loop: !0
};
new Typed('.animated-text', data);