现象:

  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表单回车自动刷新的更多相关文章

  1. 【记录】解决前端form表单回车禁止刷新页面

    最近弄前端 有form表单的情况下 按回车会自动刷新当前页面. 现记录解决方案如下: 1.去掉表单 2.不要让表单中只有一个文本框(增加一个隐藏的文本框就行) 3.以上两点都不想使用,那么就还可以在表 ...

  2. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

  3. Form表单(回车)提交问题

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  4. form表单回车提交

    当form中只有一个input[type="text"](其他的表单元素可以随意有)的输入框时候,当input[type="text"]获得焦点的时候,无论表单 ...

  5. form表单回车提交问题,JS监听回车事件

    我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此.比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键 ...

  6. from 表单回车自动提交

    自动提交的情况 1 表单只有单个输入框 2 type=‘submit  这里注意button默认type为submit 解决方法 1 添加一个隐藏的输入框 2 form添加属性 onsubmit=&q ...

  7. html form禁止表单回车自动提交(通常原因是为在ajax提交前、后进行js判断控制)

    @*onkeydown事件用于禁止回车自动提交form,这样就不经过js控制跳转*@ <form action="/Account/CheckPsw" method=&quo ...

  8. 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)

    在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...

  9. HTML form表单回车触发提交

    <script type="text/javascript">    function submitByEnter()    {        if(event.key ...

随机推荐

  1. DeepFaceLab进阶:H128,DF,SAE模型有何不同?哪个最好?

    整个换脸过程中模型是最重要的一部分,耗时久,调优难,很多人虽然一直在跑模型,却并不知道每个模型的特点. 我也常常被问及: 到底用哪个模型换脸效果最好? H128和DF有什么差别? H64和H28有什么 ...

  2. 关于Layui的表格中分页处理

    table.render({ elem: '#test' ,height:'full-125' ,url:'data.php' ,cellMinWidth: 80 //全局定义常规单元格的最小宽度,l ...

  3. leetcode 135分发糖果

    这是一道hard题,不好想,但最后还是想出来了,私以为还是根据一些思想方法自己想出来做法印象比较深刻,其次看人家的做法思想自己写代码,其次看代码理解默写,其次直接抄代码: 首先,给每个孩子都发一个糖果 ...

  4. 描述一下 Intent 和 IntentFilter?

    Android 中通过 Intent 对象来表示一条消息,一个 Intent 对象不仅包含有这个消息的目的地,还可以包含消息的内容,这好比一封 Email,其中不仅应该包含收件地址,还可以包含具体的内 ...

  5. [Python]操作shell脚本报错Permission denied

    问题: In []: os.system('./test_shell_no_para.sh') : ./test_shell_no_para.sh: Permission denied Out[]: ...

  6. Delphi实现带有格式的Excel导出功能

    功能预览 运行预览 模板样式 存储返参 导出的Excel 2. 代码实现 //执行sql的函数 procedure TForm1.GetReportData(astrsql:string); var ...

  7. Oracle常用操作表空间sql脚本

    --删除用户(如果用户下面有对象,需要加cascade参数) drop user zxasrs cascade; --修改表空间为离线 alter tablespace zxasrs offline; ...

  8. cocos2dx基础篇(27) 屏幕适配

    [3.x]https://blog.csdn.net/qq_40338728/article/details/82964046 [屏幕适配] 1.两个分辨率 1.1.窗口分辨率 在main.cpp中有 ...

  9. 平衡树(fhq无旋treap)

    fhq板子(代码正确且风格易懂) 洛谷P3369 #include<iostream> #include<cstring> #include<cstdio> #in ...

  10. [ASP.NET] 解决因为使用 updatepanel 导致 fileupload 始终无法获取文件的方法

    接手了一个新项目,需要在老项目中增添几个新页面 由于在母版页中的updatepanel包住了子版页 同时updatepanel并不支持文件上传,因此要额外增加一些设置 具体的情况可以参考这篇博客 ht ...