首先你可能会给页面的 html 和 body 增加了 height: 100%, 然后就可能造成 IOS 上页面滑动的卡顿问题。解决方案是：
(1) 看是否能把 body 和 html 的 height: 100% 去除掉。
(2) 在滚动的容器中增加：-webkit-overflow-scrolling: touch 或者给 body 增加：body {overflow-x: hidden}。
(1) 有时 body 和 html 的 height: 100% 去除掉问题可能就没有了。
(2) 到达临界值的时候在阻止事件默认行为
var startY,endY; //记录手指触摸的起点坐标 $('body').on('touchstart',function (e) { startY = e.touches[0].pageY; }); $('body').on('touchmove',function (e) { endY = e.touches[0].pageY; //记录手指触摸的移动中的坐标 //手指下滑，页面到达顶端不能继续下滑 if(endY>startY&& $(window).scrollTop()<=0){ e.preventDefault(); } //手指上滑，页面到达底部能继续上滑 if(endY<startY&& $(window).scrollTop()+ $(window).height()>=$('body')[0].scrollHeight){ e.preventDefault(); } })有时也会碰见弹窗出来后两个层的橡皮筋效果出现问题，我们可以在弹出弹出时给底层页面加上一个类名，类名禁止页面滑动这样下层的橡皮筋效果就会被禁止，就不会影响弹窗层。
(1) 添加样式 cursor ：pointer。点击后消除背景闪一下的 css：-webkit-tap-highlight-color:transparent;
首先，input 要放在 form 里面。
这时 "换行" 已经变成 “前往”。
如果想变成 “搜索”，input 设置 type="search"。
出现这种情况的原因不明，有的朋友解释：我们平时都是点击的 A 标签中的文字了。 所以要想用 JS 模拟点击 A 标签事件，就得先往 A 标签中的文字添加能被 JS 捕获的元素，然后再用 JS 模拟点击该元素即可。但是我觉得不合理，虽然找不到原因但是解决办法还是有的。
(1)document.getElementById("abc").click();
(2)$("#abc")[0].click();
这是我们想需要用一个本地的图片代替没有找的的图片
<script type="text/javascript"> function nofind(){ var img=event.srcElement; img.src="images/logoError.png"; img.οnerrοr=null; 控制不要一直跳动 } </script> <img src="images/logo.png" οnerrοr="nofind();" />
(1) 规范中有规定：如果元素的 transform 值不为 none，则该元素会生成包含块和层叠上下文。CSS Transforms Module Level 1 不只在手机上，电脑上也一样。除了 fixed 元素会受影响之外，z-index（层叠上下文）值也会受影响。绝对定位元素等和包含块有关的属性都会受到影响。当然如果 transform 元素的 display 值为 inline 时又会有所不同。最简单的解决方法就是 transform 元素内部不能有 absolute、fixed 元素.
在安卓上面，点击页面底部的输入框，软键盘弹出，页面移动上移。 而 ios 上面，点击页面底部输入框，软键盘弹出，输入框看不到了。。。查资料说什么的都有，iscroll,jquery-moblie，absolute，fixe，static 都非常复杂，要改很多。。。 让他弹出时让滚动条在最低部
var u = navigator.userAgent, app = navigator.appVersion; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { $('textarea').focus(function () { window.setTimeout('scrollBottom()', 500); }); } function scrollBottom() { window.scrollTo(0, $('body').height()); }
(1) 所以的 input 必须有 name 不然会出错
(1)navigator.onLine 可判断是否是脱机状态.
(1) 用 Object.keys，Object.keys 方法返回的是一个数组，数组里面装的是对象的属性。
var person = { "name" : "zhangshan", "sex" : "man", "age" : "50", "height" : "180", "phone" : "1xxxxxxxxxx", "email" : "xxxxxxxxx@xxx.com" }; var arr = Object.keys(person); console.log(arr.length);(2)Object.getOwnPropertyNames(obj).length
Object.keys 定义：返回一个对象可枚举属性的字符串数组；
Object.getOwnPropertyNames 定义：返回一个对象可枚举、不可枚举属性的名称； 属性的可枚举性、不可枚举性：定义：可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。
var obj = { "prop1": "v1" }; Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false }); console.log(Object.keys(obj).length); //output：1 console.log(Object.getOwnPropertyNames(obj).length); //output：2 console.log(Object.keys(obj)); //output：Array[1] => [0: "prop1"] console.log(Object.getOwnPropertyNames(obj)); //output：Array[2] => [0: "prop1", 1: "prop2"]
综合实例：
var obj = { "prop1": "v1" }; Object.defineProperty(obj, "prop2", { value: "v2", enumerable: false}); console.log(obj.hasOwnProperty("prop1")); //output: true console.log(obj.hasOwnProperty("prop2")); //output: true console.log(obj.propertyIsEnumerable("prop1")); //output: true console.log(obj.propertyIsEnumerable("prop2")); //output: false console.log('prop1' in obj); //output: true console.log('prop2' in obj); //output: true for (var item in obj) { console.log(item); } //output：prop1 for (var item in Object.getOwnPropertyNames(obj)) { console.log(Object.getOwnPropertyNames(obj)[item]); } //ouput:[prop1,prop2](1)type="tel"
iOS 和 Android 的键盘表现都差不多
(2)type="number"
优点是 Android 下实现的一个真正的数字键盘
缺点一：iOS 下不是九宫格键盘，输入不方便
缺点二：旧版 Android（包括微信所用的 X5 内核）在输入框后面会有超级鸡肋的小尾巴，好在 Android 4.4.4 以后给去掉了。 不过对于缺点二，我们可以用 webkit 私有的伪元素给 fix 掉：
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
(3)pattern 属性
pattern 用于验证表单输入的内容，通常 HTML5 的 type 属性，比如 email、tel、number、data 类、url 等，已经自带了简单的数据格式验证功能了，加上 pattern 后，前端部分的验证更加简单高效了。
显而易见，pattern 的属性值要用正则表达式。
实例 简单的数字验证
数字的验证有两个：
<input type="number" pattern="d"> <input type="number" pattern="[0-9]*">
js 获取的值是空；比如 - 12，+123 等
简单的说就是：go(-1): 返回上一页，原页面表单中的内容会丢失；back(): 返回上一页，原页表表单中的内容会保留。history.go(-1): 后退 + 刷新 history.back(): 后退
之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟 javascript：history.go() 和 history.back() 的区别类似。 Chrome 和 ff 浏览器后退页面，会刷新后退的页面，若有数据请求也会提交数据申请。类似于 history.go(-1);
而 safari（包括桌面版和 ipad 版）的后退按钮则不会刷新页面，也不会提交数据申请。类似于 javascript：history.back();
@ -------------------------------------- 中文字体的英文名称 @ 宋体 SimSun @ 黑体 SimHei @ 微信雅黑 Microsoft Yahei @ 微软正黑体 Microsoft JhengHei @ 新宋体 NSimSun @ 新细明体 MingLiU @ 细明体 MingLiU @ 标楷体 DFKai-SB @ 仿宋 FangSong @ 楷体 KaiTi @ 仿宋GB2312 FangSongGB2312 @ 楷体GB2312 KaiTiGB2312 @ @ 说明：中文字体多数使用宋体、雅黑，英文用 Helvetica
body {font-family: Microsoft Yahei,SimSun,Helvetica;}
IE：不管该行有没有文字，光标高度与 font-size 一致。
FF：该行有文字时，光标高度与 font-size 一致。该行无文字时，光标高度与 input 的 height 一致。
Chrome：该行无文字时，光标高度与 line-height 一致；该行有文字时，光标高度从 input 顶部到文字底部 (这两种情况都是在有设定 line-height 的时候)，如果没有 line-height，则是与 font-size 一致。
IOS 中情况和 Chrome 相似。
设置字体大小和行高一致，然后通过 padding 撑开大小，只给 IE 浏览器设置 line-height：-ms-line-height:40px;
打一波广告，欢迎各位大神加入web交流群，拉拉人气，感谢。
原文：https://segmentfault.com/a/1190000015178877 作者：键盘上的眼泪
转载于:https://www.cnblogs.com/zwp06/p/9381497.html
相关资源：Java项目（网页版校园生活） 数据库