Android浏览器软键盘中的回车(确认)会触发表单提交的问题解决办法

摘要:
开发的网页需要在Android手机的浏览器中打开。在表单的文本框中输入内容时,单击软键盘上的Enter将导致提交表单。2//判断浏览器是否为Android浏览器3 var bIsAndroid=sUserAgent。match(/android/i)4==“android”;如果单击按钮提交表单dragObj,则值为“底部”,

     最近在公司里做项目的时候遇到一个问题,开发出来的网页需要在Android手机中的浏览器中打开,当在表单中的文本框内输入内容时,如果这时点软键盘中的回车会导致表单被提交,而不是正常的点击按钮提交。

    经上网查询了相关资料与自己的测试,下面发出解决的代码:

    在表单的onSubmit事件中加入以下代码:

   

Android浏览器软键盘中的回车(确认)会触发表单提交的问题解决办法第1张Android浏览器软键盘中的回车(确认)会触发表单提交的问题解决办法第2张Javascript Code
 1 var sUserAgent = navigator.userAgent.toLowerCase();
 2 //判断浏览器是否为Android浏览器
 3 var bIsAndroid = sUserAgent.match(/android/i) 
 4 == "android";
 5 
 6 //submit事件的事件源对象,如果是普通的点击按钮提交表单dragObj的值为"buttom",如果是点击软键盘的回车,则值为null
 7 var ev=ev || window.event;
 8 var target=ev.target || ev.srcElement;
 9 var  dragObj  =  target.getAttribute('type');
10 
11 
12 if(bIsAndroid && dragObj==null){
13         //如果是Android浏览器并且用户是点击的软键盘的回车,则不提交表单
14     return false;
15 }

免责声明:文章转载自《Android浏览器软键盘中的回车(确认)会触发表单提交的问题解决办法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇svn 撤销 已提交的修改unity 捏脸相关下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

浅析Web前端水印方案:前端加水印和服务端加水印的适用场景、不同的实现方案、使用 MutationObserver 监听dom元素变化、MutationObserver API 介绍

一、问题背景   为了防止信息泄露或知识产权被侵犯,在web的世界里,对于页面和图片等增加水印处理是十分有必要的,水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加,根据实现方式又可以分为两大类,显性水印和数字水印。简单对比一下这两种方式的特点: 1、前端浏览器加水印: (1)减轻服务端的压力,快速反应 (2)安全系数较低,对于掌握一定...

搭建PHP开发环境(XAMPP+PhpStorm)

一、下载安装 1. 安装PhpStorm php集成开发环境,下载链接 2. 安装XAMPP php服务器组件,包含了PHP、Apache、Mysql等服务,下载链接 当然,你之前有安装MySql的可以不用安装Mysql,安装的时候不用勾选哦 二、配置XAMP 安装好xampp后,尝试启动Apache与MySQL看端口是否有冲突。 如有端口冲突导致不能启...

沉浸式-- Android沉浸式状态栏完全解析

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/51763825本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即可关注,每天都有文章更新。记得之前有朋友在留言里让我写一篇关于沉浸式状态栏的文章,正巧我确实有这个打算,那么本篇就给大家带来一次沉浸式状态栏的微技巧讲解。其...

Web基础开发最核心要解决的问题

Web基础开发要解决的问题,往往也就是那些框架出现的目的 - 要解决问题。 1. 便捷的Db操作; 2. 高效的表单处理; 3. 灵活的Url路由; 4. 合理的代码组织结构; 5. 架构延伸 缓存、安全、DB扩展等 6. 丰富的类库; 每种框架的哲学,决定了它最终的用户群体。 其中关于表单处理,因为同时涉及前后端编码,往往是开发中最繁杂、最耗时的工序。...

查看浏览器内核以及版本信息

如何查看浏览器内核以及版本信息   昨天,一位同事在测试浏览器兼容性问题时,在软件支持版本中的IE8版本测试发现问题,开发反馈是说“浏览器内核版本是IE7的,所以不兼容”   我这才知道浏览器还有内核版本,所以以此文章记录一下,也打开我的博客新篇 哈哈 一、IE版本 1.打开IE浏览器(以IE8为例),按键F12打开开发者工具,点击【脚本】》【控制台】...

postcss-pxtorem插件相关配置

功能作用:将px像素自动转化为rem。 首先安装postcss-pxtorem。 1 npm install postcss-pxtorem -D 新建一个postcss.config.js文件配置。 1 module.exports = { 2 plugins: { 3 // 兼容浏览器,添加前缀 4 au...