.focus() 在 Chrome 和 Edge 中不起作用
[英].focus() is not working in Chrome and Edge
问题描述
For our website, we use Internet Browser before and it was totally fine with no errors but starting from yesterday we migrated to modern browsers and when we click, we get error message Uncaught TypeError: document.hwinv.datatyp.options.focus is not a function in the developer tool.
对于我们的网站，我们以前使用 Internet 浏览器，它完全没有错误，但从昨天开始我们迁移到现代浏览器，当我们点击时，我们收到错误消息Uncaught TypeError: document.hwinv.datatyp.options.focus is not a function开发者工具中的Uncaught TypeError: document.hwinv.datatyp.options.focus is not a function 。 Error is causing in document.hwin.datatyp.options.focus(); document.hwin.datatyp.options.focus(); line.线。 Before using in Edge, it was totally fine and right now, it is causing that error.在 Edge 中使用之前，它完全没问题，现在，它导致了那个错误。 May I know how can I fix it?我可以知道我该如何解决吗？ Added JS Fiddle link to check.添加了 JS Fiddle 链接以进行检查。 Also, I saw adding setTimeout but I don't know how that works.另外，我看到添加了 setTimeout 但我不知道它是如何工作的。
JsFiddle link, U can see the the bottom of the web, there is 2 button and If i click those buttons, causing the error for .focus() JsFiddle 链接，你可以看到网页的底部，有 2 个按钮，如果我点击这些按钮，导致 .focus() 的错误
function gonext() { var myIndex = document.hwinv.datatyp.options.selectedIndex; var chkvalue=document.hwinv.datatyp.options[myIndex].value; if(!(chkvalue)) { document.hwinv.datatyp.options.focus(); alert("Please select Hardware Type!"); } else { document.hwinv.step.value='11'; document.hwinv.submit(); } }
<body style="margin=0px;" alink="#0000ff" vlink="#0000ff" bgcolor="#ffffff" window.focus="document.hwinv.datatyp.options.focus();"> <form name="hwinv" method="post" action="inventory.php" target="bottomview">
1 个解决方案
解决方案1
2 已采纳 2022-06-16 06:52:04
Welcome to StackOverflow!欢迎来到 StackOverflow！
Oh boy.好家伙。 If this is the sort of HTML that your site has, then migrating it to use more "modern" HTML, CSS and JS is going to be quite a long process.如果这是您的网站所拥有的那种 HTML，那么迁移它以使用更“现代”的 HTML、CSS 和 JS 将是一个相当长的过程。 But it has to be done, now that IE is officially dead.但它必须做，现在 IE 正式死了。
Alternative: Use "Internet Explorer Mode" in Edge替代方案：在 Edge 中使用“Internet Explorer 模式”
You may not be aware that there is a way to switch Edge into running a site almost identically to how IE would have done it.您可能不知道有一种方法可以将 Edge 切换到运行站点的方式几乎与 IE 的运行方式相同。 Which might be enough to get your site working again.这可能足以让您的网站再次运行。 I found somedecent instructions for how to do that .我找到了一些关于如何做到这一点的体面说明。
However, I wouldn't rely on that as a long-term solution.但是，我不会将其作为长期解决方案。 At some point, you are going to need to migrate this site to use HTML5, CSS3, and modern JS.在某些时候，您将需要迁移此站点以使用 HTML5、CSS3 和现代 JS。 But it might help you out in a pinch.但它可能会在紧要关头帮助你。
Fixing your code修复你的代码
To start with, the specific answer to your question about the exception is that the focus() method doesn't exist on the .options property of select inputs.首先，关于异常的问题的具体答案是 select 输入的.options属性上不存在focus()方法。 Rather, it exists on the select input object itself.相反，它存在于选择输入对象本身上。
But we also want to deal with the other antiquated markup in the snippet you posted.但我们也想处理您发布的片段中的其他过时标记。
-
window.focus="..."is not a thing.window.focus="..."不是一回事。 There areon____attributes on elements - such asonfocusin your case, but it is considered bad practice to use it, typically.元素上有on____属性-例如onfocus在您的情况下，但通常认为使用它是不好的做法。 Instead, register an event handler in the JS code like I do below.相反，在 JS 代码中注册一个事件处理程序，如下所示。 -
style="margin=0px"is wrong.style="margin=0px"是错误的。 Within inline style attributes, the syntax isproperty: value, notproperty=value.在内联样式属性中，语法是property: value，而不是property=value。 -
alink,vlinkandbgcolorattributes should be replaced with the appropriate CSS, as I have done below.alink、vlink和bgcolor属性应该替换为适当的 CSS，如下所示。alinkcorresponds tobody a,vlinkcorresponds tobody a:visitedandbgcolorcorresponds tobody { background-color: white; }alink对应于body a，vlink对应于body a:visited，bgcolor对应于body { background-color: white; }body { background-color: white; }.body { background-color: white; }。
function gonext() { var myIndex = document.hwinv.datatyp.options.selectedIndex; var chkvalue = document.hwinv.datatyp.options[myIndex].value; if (!(chkvalue)) { document.hwinv.datatyp.focus(); alert("Please select Hardware Type!"); } else { document.hwinv.step.value = '11'; document.hwinv.submit(); } } document.addEventListener('DOMContentLoaded', function () { document.hwinv.datatyp.focus(); });
body { margin: 0; background-color: white; } body a { color: blue; } body a:visited { color: blue; }
<body> <form name="hwinv" method="post" action="inventory.php" target="bottomview"> <select name="datatyp"> <option>Hammer</option> <option>Spanner</option> <option>Other</option> </select> </form> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.