Html input 常见问题

简介: 1.input回车事件不执行导致页面刷新 场景:在文本框中输入关键字按回车,页面自动刷新了 关键字搜索: 解决方法1:   一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。

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;
      }
   }

 

 

 

相关文章
|
移动开发 前端开发 Android开发
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
前端html input =“file“ ios/安卓解决无法选择图库/拍照问题
2149 0
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 新的 Input 类型详解
HTML5引入了多种新输入类型,显著提升了表单的用户体验和可用性。这些类型包括普通文本、搜索、电子邮件、网址、电话号码、密码、数字、范围选择、日期、时间、颜色选择等,每个类型都有特定用途和优化功能。例如,`email` 类型可自动验证邮件格式,`number` 类型提供增减按钮,而 `date` 类型则内置日期选择器。这些新类型不仅简化了用户操作,还增强了开发者对表单验证和数据交互的控制能力。
|
6月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
57 0
|
5月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
56 5
|
5月前
|
缓存
html input 如何设置禁止缓存历史记录
html input 如何设置禁止缓存历史记录
158 0
|
6月前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
70 0
|
6月前
|
Web App开发 移动开发 HTML5
HTML中input标签的23种type类型
HTML中input标签的23种type类型
|
12月前
HTML <input> 标签的 autocomplete 属性
HTML <input> 标签的 autocomplete 属性
110 0