移动端遇到的坑

1.移动端maxlength不起作用

<input type="text"  maxlength="5" />   效果ok,当 <input type="number"  maxlength="5" />时maxlength失效,长度可以无限输入。

解放方案:

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />

很简单,搞定!

2.用正则检测返回匹配到的值

语法
stringObject.match(regexp)

返回值
返回匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

3.获取当前元素名称

ele[0].localName;
时间: 2024-10-11 17:04:46

移动端遇到的坑的相关文章

总结在移动端碰到的坑

一.安卓设备的select options的坑,尽量使用各浏览器内核都支持的api 在添加 OPTION 元素时 如果需要向指定索引前插入 OPTION,可以使用 options.add(option, index): 如果需要向 SELECT 尾部添加 OPTION,可以使用 options.add(option): 如果需要向指定索引处添加(或更改) OPTION,可以使用 options[index] = option. 在删除 OPTION 元素时 如果想删除指定索引处的 OPTION

移动端的爬坑路

暂时有几个常见的需要注意一下,防止被坑. 1.手机浏览器会突然缩小顶部栏或者干脆消失.这是由于使用了浏览器默认滑动事件造成的.所以整体项目要么都使用滑动事件,要么就只使用touch滑动事件,比如better-scroll.2.ios对h5css position属性支持是有些问题的,比如fixed与input同时使用,会造成input获得焦点fiexd布局失效,这是对fiexd不友好支持所造成. 3.布局是移动端的一大坑,特别是一些属性其实很多手机厂商深度优化后的系统浏览器支持的不是很好,比如华

移动端开发的坑【持续更新...】

现在大家基本都是使用智能手机,貌似手机上的浏览器也都比较高级,还基本都是webkit内核,乍一听,好像看到了希望...可是,移动端的坑并不比IE少,并且因为调试没有PC上那么方便,貌似更难了... 简单总结几个自己在平时开发遇到的相对浅的坑,先预预热. 一 安卓手机叠加区域高亮:这是我看网上的人起的名字,表现就是点击的时候一片阴影,对功能没什么阻碍,就是不好看: 解决方案:{-webkit-tap-highlight-color:rgba(0,0,0,0)}; 二 部分浏览器无法自动播放音频:

H5移动端的一些坑、、、

H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串'device-

移动端浏览器爬坑之旅

以前总觉得移动端页面也很容易写,最近才下笔,简直五步一坑,十步一雷.查阅了些资料,整理出了部分浏览器兼容性bug. 有问题就跟浏览器客服提出来,一般他们是会处理的.那么就以二师兄展开本次分享. QQ浏览器X5内核问题汇总 https://www.qianduan.net/qqliu-lan-qi-x5nei-he-wen-ti-hui-zong/ 微信浏览器 因为微信浏览器屏蔽了一部分链接图片,所以需要引导用户去打开新页面,可以用以下方式判断微信浏览器的ua function is_weixn(

移动端视频踩坑实录

最近刚结束一个移动端涉及视频播放的小项目,踩了不少坑,现记录在此: 1.ios系统中让视频宽高都100%铺满所在父层 设置width="100%" height="100%"在ios中是无法实现宽高都100%的,应该设置 video 的样式: width:100%; height:100%; object-fit:fill; 2.安卓系统中禁止视频全屏 playsinline只能禁止ios全屏,不能禁安卓全屏,要在安卓禁止视频全屏须在 video 中设置 x5-pl

HTML 5 Audio/Video DOM canplaythrough 事件在移动端遇到的坑

canplaythrough 事件定义和用法 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件. 当音频/视频处于加载过程中时,会依次发生以下事件: loadstart durationchange loadedmetadata loadeddata progress canplay canplaythrough 浏览器支持 所有主流浏览器都支持 canplaythrough 事件. 注释:Internet Explorer 8 或

移动端开发 经典坑 第二弹(持续更新)

1. translate 3d 容器中文字出现模糊 当容器的 translate 3d 属性中出现小数的时候,容器中的文字就会有一定的模糊,当该属性为*.5的时候,模糊的现象最严重. translat3d(-341.5px, 0px, 0px); 当这个值为整数的时候,就ok 解决的方案是更新容器的宽度,使之能被整除. 2. 移动端 img标签下缝隙问题 问题描述:在移动端布局的时候,img标签和下方容器会有1px的缝隙 这个问题一般也会出现在pc端的ie 浏览器中. 解决:移动端的解决是  

移动端的适配坑(一)

1.   background ;  在vue的环境下  有的安卓手机背景图 显示不出来!!! (待解决) 目前是用定位解决的  具体原因尚待发现 2.  高度不一致的各种问题  ,   样式没有reset 导致的 3. 用flexible定义rem的时候 if (width / dpr > 540) { width = 540 * dpr; } 上面的代码会导致视口超过540  高度什么的开始不适配了 原文地址:https://www.cnblogs.com/moneyss/p/9765488