Html input 常见问题

来源:http://www.chinese-glasses.com 作者:Web前端 人气:195 发布时间:2020-03-24
摘要:时间: 2019-11-07阅读: 147标签: 表单问题: 1.input回车事件不执行导致页面刷新 场景:在文本框中输入关键字按回车,页面自动刷新了 form name="keywordForm" method="post" action="" p id="profile_nav"

时间: 2019-11-07阅读: 147标签: 表单问题:

1.input回车事件不执行导致页面刷新

场景:在文本框中输入关键字按回车,页面自动刷新了

<form name="keywordForm" method="post" action="">  
<p id="profile_nav">  
<label for="profile"> 关键字搜索: </label>  
<input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" />  
<input type="button" value="搜索" onClick="searchKeyword()">  
</p> 
</form>

解决方法1:

  一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。  既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框

解决方法2:(推荐)

  <form name="keywordForm" method="post" action="" onsubmit="return false;">  就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

 解决方法3:(不推荐)

document.onkeydown=function(e){
        var e = e || event;
        var currKey = e.keyCode || e.which || e.charCode;//支持IE,FireFox
        if (currKey == 13) {
            return false;
        }
    }

解决方法4:

<input type="text"  onkeydown="return ClearSubmit(event)" />
 function ClearSubmit(e) {
      if (e.keyCode == 13) {
         return false;
      }
   }

10bet, 

 

 

文本框输入完成后点击回车页面刷新。问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

解决方法:

1、增加一个隐藏的输入框

input itype="text" /

增加了一个隐藏的输入框之后,表单的文本框不再是唯一的,回车不会触发提交事件

2、去掉输入框的回车事件

input type="text" onkeydown="return ClearSubmit(event)" /function ClearSubmit(e) { if (e.keyCode == 13) { return false; }}

本文由10bet发布于Web前端,转载请注明出处:Html input 常见问题

关键词:

上一篇:Js事件的截获

下一篇:没有了

频道精选

最火资讯