现象:

  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. leetcode 121买卖股票的最佳时机I

    从下标1开始,维护两个变量,一个是0~i-1中的最低价格low,一个是当前的最高利润res;先更新最高利润,在更新最低价格:应用了贪心算法的基本思想,总是选择买入价格最低的股票,代码如下: 具有最优子 ...

  2. leetcode 289生命游戏

    class Solution { public: vector<vector<,},{,},{,},{,-},{,-},{-,-},{-,},{-,}}; void gameOfLife( ...

  3. [Flask]常用过滤器-控制字符串

    truncate: 字符串截断 <p>{{ 'hello every one' | truncate(9)}}</p> length:获取列表长度 <p>{{ [, ...

  4. JavaEE-实验四 HTML与JSP基础编程

    1.使用HTML的表单以及表格标签,完成以下的注册界面(验证码不做) html代码(css写于其中) <!DOCTYPE html> <html> <head> & ...

  5. 阶段3 2.Spring_06.Spring的新注解_7 spring整合junit问题分析

    测试类重复代码的问题 这是之前的方式 运行findAll的方法,没有问题 测试人员不需要关心上面的方法,.应该关心的各个方法是否能够正常的运行 对于一个测试工程师,只要写完变量就可以测试了. 可以使用 ...

  6. Object Creation

    Although using the object constructor or an object literal are convenient ways to create single obje ...

  7. ffi模块——node调用动态链接库(.so/.dll文件)

    参考资料1:[https://www.npmjs.com/package/ffi] 参考资料2:[http://imweb.io/topic/57732fbef0a5487b05f325bf] 参考资 ...

  8. 【内部】Fiddler设置代理请求的方式

    1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...

  9. centos7 系統vps安裝mysql5.6及設置本地遠程連接筆記

    用xshell連接上vps 1,下载mysql的repo源 wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm su ...

  10. Pytorch实现Top1准确率和Top5准确率

    之前一直不清楚Top1和Top5是什么,其实搞清楚了很简单,就是两种衡量指标,其中,Top1就是普通的Accuracy,Top5比Top1衡量标准更“严格”, 具体来讲,比如一共需要分10类,每次分类 ...