设备方向时如何丢失输入焦点?

时间:2013-10-09 13:52:29

标签: javascript iphone ios ipad mobile

我注意到当您专注于表单元素并更改方向时,iOS设备会锁定您网站的视图。

我想知道是否有办法修改已实施的代码,以包含失去<input>&amp;的功能。 <select>关注景观或肖像的定位?

这是我已经拥有的代码:

// Fix HTML width issues on device orientation

window.document.addEventListener('orientationchange', function() {
  var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (iOS && viewportmeta) {
    if (viewportmeta.content.match(/width=device-width/)) {
      viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
    }
    viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
  }
  // If you want to hide the address bar on orientation change, uncomment the next line
  window.scrollTo(0, 0);
}, false);

非常感谢任何帮助,谢谢

1 个答案:

答案 0 :(得分:0)

<强>尤里卡!

window.document.addEventListener('orientationchange', function(){
    if (window.orientation === 90 || window.orientation === -90){
        document.activeElement.blur();
    }
    else if(window.orientation === 0) {
        var viewportmeta = document.querySelector('meta[name="viewport"]');
        viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
    }
    window.scrollTo(0, 0);
}, false);