• form表单回车提交问题(转)


    通过回车进行提交表单,可以在用户输入完毕后直接进行回车查询操作,不用点击鼠标,在某些场景应用下非常方便,用户体验较好。 

    总结&科普一下: 

    1、如果form里面只有一个input type=text,那么无论有没有submit按钮,在input中回车都会提交表单。如果不想回车提交,需要再加一个input type=text,然后设置display:none. 

    2、如果form里面多于一个input type=text,那么必须有一个submit按钮才可以回车提交表单。 
    按钮可以是input也可以是button,他们应设置type=submit。如果只写button而不写type,那么IE下type=button,FF下则是type=submit。 

    3、如果form里面多于一个input type=text,并想实现回车提交表单,又不想在页面中出现原生的submit按钮。比如:你想通过一个带hover的图片连接,并通过js脚本来实现华丽的验证及表单提交…… 

    可以加上一个input type=submit 并设置display:none在form里—— 但是!这仅仅对FF等有效。在IE下就会非常悲剧……如果希望IE生效,需要做以下的事情: 

    <input type="submit" style="display:block;overflow:hidden;0px;height:0px;position:absolute"> 

    还尝试了其他很多方法,均无效。比如: 
    将input的颜色、边框、背景都设置为#FFF,在IE下会出现恶心的焦点框…… 
    设置input的透明度…… 
    设置input的visablity…… 
    将input移到页面外面可见区域之外…… 
    将input藏在某个object下面…… 
    还能在trick点么…… 

    最后一个问题:

    为什么非要费劲的用form的默认回车提交,而不在input中监听keydown事件,等到code=13时使用javascirpt调用form对象的submit()方法?
     
    前提如果你的form targtet!=_blank,那么你可以实现你想要的。 
    但是一旦target=_blank,根据我的实践,在keydown事件中进行submit到_blank 
    —— 这个新窗口定会被IE给block掉……(顺便提一下,如果是在click事件里调用form的submit方法,无论是本窗口还是新窗口,在IE中都不会被block,怀疑是IE的防弹窗广告策略) 

    这,也就是我写这篇文章的意义: 
    回车提交查询、新窗口、多input text、不出现原生的button。 

    <html:form action="../...do" onsubmit="return save();">
    ...
    ...
    <html:submit>
    <bean:message key="save"/>
    </html:submit>
    </html:form>

    上面的在IE下,可以回车提交表单,但是在chrome下不能,原因如下:

     chrome在表单中敲回车键会触发提交表单 
    一个登录口在IE、firefox下敲回车后用js通过ajax验证成功后进行跳转,几个输入框写在了一个form中,当用户输入用户密码后触发ajax进行判断,此时IE和firefox都不会进行进行form的提交,且form中没有submit.而chorm和safari都会把此时input所有的form进行submit.

     

    解决方法:

    在<form>里屏蔽:

    <form id="form1" runat="server" onkeypress="javascript:return NoSubmit(event);">

    <script type="text/javascript">

    function NoSubmit(ev)

    {

        if( ev.keyCode == 13 )

        {

            return false;

        }

        return true;

    }

    </script>

  • 相关阅读:
    《SQL初学者指南》——第1章 关系型数据库和SQL
    《SQL初学者指南》——第1章 关系型数据库和SQL
    快讯:Oracle自治事务处理数据库发布和19c路线图
    NoReverseMatch: u'polls' is not a registered namespace
    Tomcat配置图片保存路径,图片不保存在项目路径下
    请慎用java的File#renameTo(File)方法
    sentinel monitor mymaster 10.10.17.200 6379 1 1个哨兵同意就切换
    静默错误:Oracle 数据库是如何应对和处理的 ?
    如何对Node.js默认下载路径进行修改
    “我卖一个群可以赚2万,但这个项目,死了!”
  • 原文地址:https://www.cnblogs.com/duanxz/p/2958910.html
Copyright © 2020-2023  润新知