h5网页input 的type设置为number一般会产生三个问题，一个问题是maxlength属性不好用了。
另外一个是form提交的时候，默认给取整了。三是部分安卓手机出现样式问题。

//问题一解决，我目前用的是js。如下 <input type="number"oninput="checkTextLength(this ,10)"> functioncheckTextLength(obj, length) { if(obj.value.length > length) { obj.value = obj.value.substr(0, length); } } //问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下： <input type="number"step="0.01"/> 关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。 假如step和min一起使用，那么数值必须在min和max之间。 看下面的例子： <input type="number"step="3.1"min="1"/> 输入框可以输入哪些数字？ 首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。 //问题三，去除input默认样式 input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

ios 设置input 按钮样式会被默认样式覆盖

解决方式如下： input, textarea { border: 0; -webkit-appearance: none; } 设置默认样式为none

select 下拉选择设置右对齐

设置如下： select option { direction: rtl; }

通过transform进行skew变形，rotate旋转会造成出现锯齿现象

可以设置如下： -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等)

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题， 但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。 -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-size-adjust:100%;

移动端 HTML5 audio autoplay 失效问题

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。 解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。 document.addEventListener('touchstart',function() { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });

移动端 HTML5 input date 不支持 placeholder 问题

这个我感觉没有什么好的解决方案，用如下方法 <input placeholder="Date" type="text" onfocus="(this.type='date')">

部分机型存在type为search的input，自带close按钮样式修改方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为: #Search::-webkit-search-cancel-button{ display:none; } 如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

唤起select的option展开

//zepto方式: $(sltElement).trigger("mousedown"); //原生js方式: functionshowDropdown(sltElement) { varevent; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown',true,true, window); sltElement.dispatchEvent(event); };

以上所有资料搜集整理自网络，如有不对的地方希望及时告知，欢迎大家批评指正，谢谢！


posted @