现象:

  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. electron-Menu创建原生应用菜单和上下文菜单。

    当在MacOS.Windows.Linux中使用menu设置程序菜单时,会设置在各个程序窗体的顶层. Note: 如果没有在app中设置一个菜单,系统会自动生成一个默认菜单, 默认生成的菜单中包含了一 ...

  2. matplotlib之折线图

    1.案例一 # coding=utf-8 from matplotlib import pyplot as plt import random # 设置字体相关 from matplotlib imp ...

  3. xcode dyld: Library not loaded: @rpath/libswiftCore.dylib问题解决

    app安装好了之后就报这个错误,这个时候可以将xcode工程clear一下,删除已经安装好的app,再重新安装即可

  4. Spring MVC Post请求返回403错误,Get请求却正常,可能是安全框架引起的前端解决办法

    原文地址:http://blog.csdn.net/t894690230/article/details/52404105 困惑:很奇怪,明明在方法上面配置了RequestMethod.POST,PO ...

  5. 调整Linux终端显示分辨率

    linux 默认cli (command line interface)分辨率一般都比较小,显示的字体很大,不太美观,有时还影响结果的显示(例如出现kernel panic).所以有必要改变一下cli ...

  6. apache域名跳转

    状态码:*301: 永久重定向,域名跳转一定要用301,对搜索引擎友好的. 302:临时重定向在虚拟主机配置文件/usr/local/apache2/conf/extra/httpd-vhosts & ...

  7. fixture详细介绍-作为参数传入,error和failed区别

    前言 fixture是pytest的核心功能,也是亮点功能,熟练掌握fixture的使用方法,pytest用起来才会得心应手! fixture简介 fixture的目的是提供一个固定基线,在该基线上测 ...

  8. Jmeter之乱码 (三)

    使用Jmeter执行JDBC请求,往MySQL数据库中插入数据,如下图: 执行结果如下: 解决方案: 在JDBC Connection Configuration中的Database URL后加上&a ...

  9. django 视图常用操作

    获取参数. 类型是QueryDict https://www.cnblogs.com/zhaoyang-1989/p/11989515.html request.POST.get('参数名') req ...

  10. [LeetCode] 373. Find K Pairs with Smallest Sums 找和最小的K对数字

    You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Define ...