代码之家 › 专栏 › 技术社区 › simonalexander2005

javascript onclick因输入错误而被调用,在Chrome上,而不是IE上

html javascript

simonalexander2005 · 技术社区 · 4 年前

我正在尝试解决继承的现有应用程序中的问题。

基本上,如果在顶部框(“过滤器”)中按enter键,那么两个按钮的点击处理程序都会被触发——但只有在Chrome中,而不是在IE中(IE按预期工作)。

<html>
    <head>
        <script type="text/javascript">
            function verify(){
                return confirm("New Button Clicked");
            }
            
            function verifyFilter(){
                return confirm("Filter Button Clicked");
            }
        
            function swallowenter(button) {
                if(event.keyCode==13) {
                    event.keyCode=null;
                    window.document.getElementById(button).click();
                }    
                return true;
            }

            function swallowentercompletely() {
                if(event.keyCode==13) {
                    event.keyCode=null;
                }    
                return true;
            }
        </script>
    </head>
    <body onkeypress="javascript:swallowentercompletely();">
        <form id="formID" action="file.html" method="post">
            <table cellpadding="0" cellspacing="0" border="0">              
                    <tfoot>
                        <!-- main table footer -->
                        <tr>
                            <td colspan="8" align="left">
                                Date: <input id="newDate" name="newDate" onkeypress="javascript:swallowenter('newButton');" type="text" value="" size="8" maxlength="10"/>
                                <input type="submit" value="New" name="newButton" onClick = "return verify()"  onkeypress="javascript:swallowenter('newButton');"/> &nbsp;&nbsp;&nbsp;
                            </td>
                        </tr>
                    </tfoot>                
                <tbody>
                    <!--  main table body  -->
                    <tr>
                        <td>
                            <table cellpadding="0" cellspacing="0" border="0" onkeypress="javascript:swallowenter('filterButton');">
                                <tbody>
                                    <tr>
                                        <td>
                                            <input id="filterText" name="filterText" type="text" value="Filter"/>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td align="right">
                                            <input type="submit" value="Filter" name="filterButton" id="filterButton" onClick = "return verifyFilter()" />
                                            &nbsp;
                                        </td>                                       
                                    </tr>                                   
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
                <!-- end main table body -->
            </table>
        </form>
    </body>
</html>

此外,卸下 <form/> 标签也使它在Chrome中工作-所以在交互的方式中有一些东西导致了这个问题。所以,就好像“New”按钮是表单的默认按钮;而 swallowenter

---更新---

我已经把 alert(event.keyCode); event.keyCode=null; ,键代码显示为 13 < 13

0 回复 | 直到 4 年前

axtck 4 年前

我认为主要的问题是你的结案 </form> </body> 标签,在他们的地方,你应该得到它的工作。

<!-- this -->
<body onkeypress="javascript:swallowentercompletely();">
  <form id="formID" action="file.html" method="post">
    <!-- rest of html -->
  </body> 
</form>  


<!-- should become -->
<body onkeypress="javascript:swallowentercompletely();">
  <form id="formID" action="file.html" method="post">
    <!-- rest of html -->
  </form>
</body>

此外,还必须阻止默认操作。

function swallowenter(button) {
  event.preventDefault(); // prevent the default action
  if (event.keyCode == 13) {
    event.keyCode = null;
    window.document.getElementById(button).click(); 
  }
  return true;
}

simonalexander2005 4 年前

问题是,在Chrome(以及所有现代浏览器)中, event.keyCode 是只读的。这意味着您不能仅重写该值。

function swallowenter(button) {
    if(event.keyCode==13) {
        event.preventDefault(); // CHANGED HERE
        window.document.getElementById(button).click();
    }    
    return true;
}

event.preventDefault() 将阻止对默认事件行为进行操作。

此外,在我发布的代码中,我需要将newButton更改为具有一个id,而不仅仅是一个名称;因此 getElementById 打电话就能找到。