关于form表单回车自动刷新
现象:
form表单,输入框聚焦后,回车,页面刷新跳转。
原因:
form表单,在只有一个输入框的时候,在点击回车时,就会触发表单的提交,而form若没有url,则提交后就会刷新页面,导致跳转。
解决:
1.禁用document的回车事件
在不知道原因的情况下,可以直接禁用document的回车事件。
function document.onkeydown() {
var e = event.srcElement;
if (event.keyCode == 13) {
return false;
}
}
2.禁用该输入框的回车事件
禁用该输入框的回车事件。
<input type="text" οnkeydοwn="return ClearSubmit(event)" />
function ClearSubmit(e) {
if (e.keyCode == 13) {
return false;
}
}
3.隐藏输入框
知道原因后,可以采用增加一个隐藏输入框的方法,避免回车提交。
<input id="hiddenText" type="text" style="display:none" />
关于form表单回车自动刷新的更多相关文章
- 【记录】解决前端form表单回车禁止刷新页面
最近弄前端 有form表单的情况下 按回车会自动刷新当前页面. 现记录解决方案如下: 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表 ...
- form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" onsubmi ...
- Form表单(回车)提交问题
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...
- form表单回车提交
当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单 ...
- form表单回车提交问题,JS监听回车事件
我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...
- from 表单回车自动提交
自动提交的情况 1 表单只有单个输入框 2 type=‘submit 这里注意button默认type为submit 解决方法 1 添加一个隐藏的输入框 2 form添加属性 onsubmit=&q ...
- html form禁止表单回车自动提交(通常原因是为在ajax提交前、后进行js判断控制)
@*onkeydown事件用于禁止回车自动提交form,这样就不经过js控制跳转*@ <form action="/Account/CheckPsw" method=&quo ...
- 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)
在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...
- HTML form表单回车触发提交
<script type="text/javascript"> function submitByEnter() { if(event.key ...
随机推荐
- leetcode 121买卖股票的最佳时机I
从下标1开始,维护两个变量,一个是0~i-1中的最低价格low,一个是当前的最高利润res;先更新最高利润,在更新最低价格:应用了贪心算法的基本思想,总是选择买入价格最低的股票,代码如下: 具有最优子 ...
- leetcode 289生命游戏
class Solution { public: vector<vector<,},{,},{,},{,-},{,-},{-,-},{-,},{-,}}; void gameOfLife( ...
- [Flask]常用过滤器-控制字符串
truncate: 字符串截断 <p>{{ 'hello every one' | truncate(9)}}</p> length:获取列表长度 <p>{{ [, ...
- JavaEE-实验四 HTML与JSP基础编程
1.使用HTML的表单以及表格标签,完成以下的注册界面(验证码不做) html代码(css写于其中) <!DOCTYPE html> <html> <head> & ...
- 阶段3 2.Spring_06.Spring的新注解_7 spring整合junit问题分析
测试类重复代码的问题 这是之前的方式 运行findAll的方法,没有问题 测试人员不需要关心上面的方法,.应该关心的各个方法是否能够正常的运行 对于一个测试工程师,只要写完变量就可以测试了. 可以使用 ...
- Object Creation
Although using the object constructor or an object literal are convenient ways to create single obje ...
- ffi模块——node调用动态链接库(.so/.dll文件)
参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...
- 【内部】Fiddler设置代理请求的方式
1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...
- centos7 系統vps安裝mysql5.6及設置本地遠程連接筆記
用xshell連接上vps 1,下载mysql的repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm su ...
- Pytorch实现Top1准确率和Top5准确率
之前一直不清楚Top1和Top5是什么,其实搞清楚了很简单,就是两种衡量指标,其中,Top1就是普通的Accuracy,Top5比Top1衡量标准更“严格”, 具体来讲,比如一共需要分10类,每次分类 ...