<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><style> button,input{ width: 100px; height: 100px; margin-top: 100px; } </style> </head> <body> <input type="button" value="input按鈕"> <button>button按鈕</button><script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script> $(function(){ $("input").on("touchstart", function(){ $(this).val("input focus"); }).on("touchend", function(){ $(this).val("input blur"); }); $("button").on("touchstart", function(){ $(this).text("button focus"); }).on("touchend", function(){ $(this).text("button blur"); });});</script></body> </html> 項(xiàng)目中遇到使用安卓手機(jī)點(diǎn)擊按鈕可以獲得焦點(diǎn)和失去焦點(diǎn)。IOS系統(tǒng)的卻獲取不到,這是為什么呢
你試試touch的。三種在規(guī)范中列出并獲得跨移動(dòng)設(shè)備廣泛實(shí)現(xiàn)的基本觸摸事件:
jquery已經(jīng)廢棄了bind方法,建議使用on來(lái)代替bind,用off來(lái)代替unbind。其次,因?yàn)槟阕鲎隽艘粋€(gè)會(huì)導(dǎo)致瀏覽器一直彈窗的操作,所以ios的禁止掉了。你input 和button 綁定了獲取焦點(diǎn)和失去焦點(diǎn)的兩個(gè)事件,而且都是彈窗。當(dāng)你先獲取焦點(diǎn)的時(shí)候,觸發(fā)彈出了一個(gè)框,彈框的操作會(huì)導(dǎo)致元素失去焦點(diǎn),所以又會(huì)觸發(fā)失去焦點(diǎn)的事件。alert彈窗關(guān)閉后,瀏覽器會(huì)歸還焦點(diǎn)給之前的元素,所以又會(huì)觸發(fā)獲得焦點(diǎn)的事件,如此就會(huì)一直彈窗。你可以嘗試把你的代碼做如下修改:先是建議將所有的bind替換為on,其次將alert替換成比如頁(yè)面插入一個(gè)div并給個(gè)id,然后改變這個(gè)div中間的文字來(lái)看效果