现象:

  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. Jquery 选择器的用法

    用js 动态生成<ul>标签的<li>条目,因为在动态的创建过程中li的点击事件是不太方便的,因此采用JQuery 的类选择器来实现. html代码: <div id=& ...

  2. C# NAudio 录制声音和显示波形图

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. android 给控件使用自定义字体Typeface

    第一步:将字体资源放在assets 资源文件夹下: 第二步:获取字体资源 Typeface mTf = Typeface.createFromAsset(c.getAssets(), "Op ...

  4. 【10】css设置文字不换行,超过的部分用“...”代替

    设置文字不换行,超过的部分用“...”代替  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: 210 ...

  5. Python基本语法_运算符详解

    目录 目录 前言 软件环境 身份运算符 算术运算符 比较运算符 位移运算符 自变运算符 位运算符 逻辑运算符 成员关系运算符 Python真值表 最后 前言 在前面的博文介绍了Python的数据结构之 ...

  6. 拉取代码产生冲突 && 切换分支

    1.拉取代码产生冲突 项目中用的主要是 IDEA 编辑器,拉取代码时产生冲突的时候,就先 add + commit 一下,然后再拉取代码,这样子就不冲突了. 拉取过后再push一次. 2.切换一个新增 ...

  7. python学习笔记:(十四)面向对象

    1.类(class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法 2.类变量: 类变量在整个实例化的对象中是公用的.类变量定义在类中且在函数体之外.类变量通 ...

  8. ASP.NET MVC 开发随笔(二)

    1.目前在局部视图中使用多个model时候,发现使用IEnumerable的时候,读取不了原来model的内容,所以采用List发现没问题 2. 如果想在JS中使用Razor,则需要在Razor添加& ...

  9. myeclipse_2017_CI_8安装与破解

    一.下载myeclipse_2017_CI_8安装包与破解文件 二.安装myeclipse_2017_CI_8,安装完成后不要运行MyEclipse,将 "launch MyEclipse ...

  10. 描述什么是springboot

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作<Expert One-On-One J2EE Developme ...