• Html表单中回车键跳转文本框


           最近在写一个重大需求的Mis系统,需要大量录入一些需求征集,里面有很多文本框input,所以在录入时,需要点击鼠标或者按tab键跳转到下一个文本框,比较麻烦,所以就想用回车键来代替,当按下回车键时,自动跳入下一个文本框,这样就会节约大量的时间和工作量,录入也比较简单。

          遇到的问题:

          由于文本框都是在form表单中,当表单中有提价按钮时,按下回车键,浏览器会默认提交表单,但是我们只是想让他跳到下一个文本框,那么就想到关闭form表单回车键提交表单的事件,但是这样又会将回车键跳转文本框的功能也关闭,那么如何实现这一功能呢?

         于是就想到用回车键来代替tab键,这样就很方便了。下面来看代码。

         

    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    
    <script type="text/javascript">
        function handleEnter(field, event) {
            var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
                    : event.charCode;
            if (keyCode == 13) {
                var i;
                for (i = 0; i < field.form.elements.length; i++)
                    if (field == field.form.elements[i])
                        break;
                i = (i + 1) % field.form.elements.length;
                field.form.elements[i].focus();
                return false;
            } else
                return true;
        }
    </script>
    </head>
    <body>
    <form action="1.html" method="post">
    1.<input type="text" onkeypress="return handleEnter(this, event)">
    2.<input type="text" onkeypress="return handleEnter(this, event)">
    3.<input type="text" onkeypress="return handleEnter(this, event)">
    4.<input type="text" onkeypress="return handleEnter(this, event)">
    5.<input type="text" onkeypress="return handleEnter(this, event)">
    6.<input type="text" onkeypress="return handleEnter(this, event)">
    <input type="submit" value="提交" >
    </form>
    </body>
    </html>

    这样,当你输完一个文本框时,只要按下回车键,就能跳转到下一个文本框,当跳转到提交按钮时,直接提交表单。是不是很简单啊,快来实践吧!

  • 相关阅读:
    突袭HTML5之SVG 2D入门9 蒙板
    突袭HTML5之SVG 2D入门1 SVG综述
    突袭HTML5之番外篇 管中窥豹
    突袭HTML5之SVG 2D入门8 文档结构
    突袭HTML5之SVG 2D入门6 坐标与变换
    突袭HTML5之SVG 2D入门5 颜色的表示
    突袭HTML5之SVG 2D入门7 重用与引用
    突袭HTML5之SVG 2D入门3 文本与图像
    突袭HTML5之SVG 2D入门2 图形绘制
    突袭HTML5之SVG 2D入门11 动画
  • 原文地址:https://www.cnblogs.com/zll20153246/p/7899931.html
Copyright © 2020-2023  润新知