转载--form表单的默认提交行为

原文来自：https://www.cnblogs.com/sea-breeze/p/7083580.html

一 如果<form></form>表单中只有一个<input type="text"/>，则使文本框获取焦点，并单击回车，form会自动提交。

    提交路径为action属性拼接到当前路径（action属性默认为空字符串，如果form没有action属性，则提交路径与当前路径相同）。

    浏览器表现：Chrome（桌布版、移动版）会出现此问题，Android手机会出现。Safari（桌面版、移动版）不会出现。

    解决方法：禁止表单提交。

    1  设置成<form onsubmit="return false;">

    2 增加一个无name属性的隐藏文本框 <input type="text" display: inline !important; float: none; background-color: rgb(40, 85, 126); color: rgb(0, 0, 0); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">

    3 监听input的keydown事件。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo</title>
    </head>
    <body>
        <form >
            <input type="text" name="username"/>
        </form>
    </body>
</html>

 

posted @ 2020-08-28 10:50  龙猫儿  阅读(539)  评论(0)  编辑  收藏  举报