1、h5網站input 設置爲type=number的問題
h5網頁input 的type設置爲number通常會產生三個問題,一個問題是maxlength屬性很差用了。另一個是form提交的時候,默認給取整了。三是部分安卓手機出現樣式問題。html
問題一解決,我目前用的是js。以下ios
<input type="number" oninput="checkTextLength(this ,10)"> function checkTextLength(obj, length) { if(obj.value.length > length) { obj.value = obj.value.substr(0, length); } }
或者git
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />
或者github
簡單方法,直接把number改爲tel 而後設置maxlengthweb
問題二,是由於form提交默認作了表單驗證,step默認是1,要設置step屬性,假如保留2位小數,寫法以下:api
<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之間。sass
看下面的例子:app
<input type="number" step="3.1" min="1" />
輸入框能夠輸入哪些數字?ide
首先,最小值是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; }
2、ios 設置input 按鈕樣式會被默認樣式覆蓋
解決方式以下:
input, textarea { border: 0; -webkit-appearance: none; }
設置默認樣式爲none
3、IOS鍵盤字母輸入,默認首字母大寫
解決方案,設置以下屬性
<input type="text" autocapitalize="off" />
4、select 下拉選擇設置右對齊
設置以下:
select option { direction: rtl; }
5、經過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)
6、移動端點擊300ms延遲
300ms尚可接受,不過由於300ms產生的問題,咱們必需要解決。300ms致使用戶體驗並非很好,解決這個問題,咱們通常在移動端用tap事件來取代click事件。
關於300ms延遲,具體請看:http://thx.github.io/mobile/300ms-click-delay/
7、移動端點透問題
案例以下:
<div id="haorooms">點頭事件測試</div> <a href="www.haorooms.com">www.haorooms.com</a>
div是絕對定位的蒙層,而且z-index高於a。而a標籤是頁面中的一個連接,咱們給div綁定tap事件:
$('#haorooms').on('tap',function(){ $('#haorooms').hide(); });
咱們點擊蒙層時 div正常消失,可是當咱們在a標籤上點擊蒙層時,發現a連接被觸發,這就是所謂的點透事件。
緣由:
touchstart 早於 touchend 早於click。 亦即click的觸發是有延遲的,這個時間大概在300ms左右,也就是說咱們tap觸發以後蒙層隱藏, 此時 click尚未觸發,300ms以後因爲蒙層隱藏,咱們的click觸發到了下面的a連接上。
解決:
一、 儘可能都使用touch事件來替換click事件。例如用touchend事件(推薦)。
二、用fastclick,https://github.com/ftlabs/fastclick
3 、用preventDefault阻止a標籤的click
四、延遲必定的時間(300ms+)來處理事件 (不推薦)
五、以上通常都能解決,實在不行就換成click事件。
下面介紹一下touchend事件,以下:
$("#haorooms").on("touchend", function (event) { event.preventDefault(); });
8、消除 IE10 裏面的那個叉號
input:-ms-clear{display:none;}
9、關於 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%;
10、關於 iOS 系統中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格
能夠經過正則去掉
this.value = this.value.replace(/\u2006/g, '');
11、移動端 HTML5 audio autoplay 失效問題
這個不是 BUG,因爲自動播放網頁中的音頻或視頻,會給用戶帶來一些困擾或者沒必要要的流量消耗,因此蘋果系統和安卓系統一般都會禁止自動播放和使用 JS 的觸發播放,必須由用戶來觸發才能夠播放。
解決方法思路:先經過用戶 touchstart 觸碰,觸發播放並暫停(音頻開始加載,後面用 JS 再操做就沒問題了)。
解決代碼:
document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause(); });
12、移動端 HTML5 input date 不支持 placeholder 問題
這個我感受沒有什麼好的解決方案,用以下方法
<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">
有的瀏覽器可能要點擊兩遍!
方法二
input[type="date"]:before{ content: attr(placeholder); color:#ddd; }
js部分
var o = document.getElementById('date'); o.onfocus = function(){ this.removeAttribute('placeholder'); }; o.onblur = function(){ if(this.value == '') this.setAttribute('placeholder','請輸入日期'); };
經過上面代碼應該就能夠解決了!
十3、部分機型存在type爲search的input,自帶close按鈕樣式修改方法
有些機型的搜索input控件會自帶close按鈕(一個僞元素),而一般爲了兼容全部瀏覽器,咱們會本身實現一個,此時去掉原生close按鈕的方法爲
#Search::-webkit-search-cancel-button{ display: none; }
若是想使用原生close按鈕,又想使其符合設計風格,能夠對這個僞元素的樣式進行修改。
美化的話,請看http://www.haorooms.com/post/qd_ghfx 這篇文章的第五條!
十4、喚起select的option展開
zepto方式:
$(sltElement).trrgger("mousedown");
原生js方式:
function showDropdown(sltElement) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); sltElement.dispatchEvent(event); };
十5、手機端一像素border設置
假如border所在div的class名字是haorooms
.haorooms:after, .haorooms:after { border-top: 1px solid #bfbfbf; content: ' '; display: block; width: 100%; position: absolute; left: 0; bottom: 0; } /* 1.5倍 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 150/100), only screen and (min-device-pixel-ratio: 1.5) { .haorooms:after, .haorooms:after { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } /* Retina 適配 */ @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) { .haorooms:after, .haorooms:after { -webkit-transform: scaleY