设备定向时如何失去输入焦点？

Posted 2023-03-14

【中文标题】设备定向时如何失去输入焦点？

【英文标题】：How to lose input focus when device orientates?

【发布时间】：2013-10-09 13:52:29

【问题描述】：

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

我想知道是否有办法修改已经实现的代码以包含失去<input>和<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】：

尤里卡！

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);