IOS在輸入焦點上顯示鍵盤

Question

我有一個無法解決的問題。

鍵盤不顯示在 IOS 上的input.focus()上

 searchMobileToggle.addEventListener('click', function() {
       setTimeout(function(){
          searchField.focus();
       }, 300);
    });

我一直在尋找沒有結果的解決方案，我知道這是一個經常未解決的問題，但我看到了NIKE ( https://m.nike.com/fr/fr_fr/ ) 和FOODSPRING ( https://www.foodspring .fr/ ）在移動設備上進行。

所以我想知道他們是怎么做的？

Answer 1

其他答案都不適合我。 我最終查看了 Nike javascript 代碼，這就是我想出的可重用函數：

function focusAndOpenKeyboard(el, timeout) {
  if(!timeout) {
    timeout = 100;
  }
  if(el) {
    // Align temp input element approximately where the input element is
    // so the cursor doesn't jump around
    var __tempEl__ = document.createElement('input');
    __tempEl__.style.position = 'absolute';
    __tempEl__.style.top = (el.offsetTop + 7) + 'px';
    __tempEl__.style.left = el.offsetLeft + 'px';
    __tempEl__.style.height = 0;
    __tempEl__.style.opacity = 0;
    // Put this temp element as a child of the page <body> and focus on it
    document.body.appendChild(__tempEl__);
    __tempEl__.focus();

    // The keyboard is open. Now do a delayed focus on the target element
    setTimeout(function() {
      el.focus();
      el.click();
      // Remove the temp element
      document.body.removeChild(__tempEl__);
    }, timeout);
  }
}

// Usage example
var myElement = document.getElementById('my-element');
var modalFadeInDuration = 300;
focusAndOpenKeyboard(myElement, modalFadeInDuration); // or without the second argument

請注意，這絕對是一個 hacky 解決方案，但 Apple 這么長時間都沒有解決這個問題的事實證明了它的合理性。

Answer 2

我找到了一個解決方案， click()不起作用，但我想通了。

searchMobileToggle.addEventListener('click', function() {
         if(mobileSearchblock.classList.contains('active')) {
            searchField.setAttribute('autofocus', 'autofocus');
            searchField.focus();
        }
        else {
            searchField.removeAttribute('autofocus');
        }
    });

加載組件時，我正在使用正在刪除輸入autofocus屬性的 vue.js。 所以我點擊它，但還有另一個問題，自動對焦只工作一次，但結合焦點（），它現在一直工作:)

謝謝你的幫助！

Answer 3

自動對焦現在可以與iOS更新13.1.2一起使用！！！！ 這真是太好了，因為這個問題已經存在多年了。

Answer 4

這真的讓我/我們發瘋。 它在 Android 手機上運行良好，但 Apple 開發人員禁用了某些功能。 （我知道在不必要的時候彈出鍵盤很煩人）。

我偶然發現 Semantic-UI 的“彈出”模塊神奇地解決了這個問題。

請注意，該解決方案適用於 SemanticUI（@semantic-ui 團隊可能會告訴什么事件使這項工作有效）

以下是我的做法：

const [search, setSearch] = useState(false);
const inputRef = useRef(null);

React.useEffect(() => {
  if (search) {
     inputRef.current.focus();
   } else {
     inputRef.current.blur();
   }
}, [search]);

<div onClick={() => setSearch(true)}> 
   <Popup
     content="Search for Swimmers and Time Standards."
     offset={[-500, -1000]}
     trigger={<Icon name="search" />}
      />
</div>

{search && <Input ref={inputRef} />}

如你所見，我用 Popup 模塊包裹了觸發 Icon，並通過設置瘋狂偏移來隱藏 Popup 內容。 然后它神奇地起作用。

在此處查看演示： https ://swimstandards.com/（在您的 iPhone 上查看）

Answer 5

角度解決方案：

單擊按鈕時，我們需要創建臨時輸入，附加到現有容器（靠近我們的輸入）並專注於它。

  btnClicked() {
      this.showModal = true; 
      
      this.searchBar = this.renderer2.selectRootElement('#searchBar', true);
     // 2nd argument preserves existing content

      // setting helper field and focusing on it
      this.inputHelper = this.renderer2.createElement('input');
      this.renderer2.appendChild(this.searchBar, this.inputHelper);
      this.inputHelper.focus();

      let event = new KeyboardEvent('touchstart',{'bubbles':true});            
      this.searchBarButton.nativeElement.dispatchEvent(event);
  }

在顯示模態/目標輸入后，我們移動焦點並刪除臨時的：

  initiateKeyboard() {       
    setTimeout(()=> {      
      this.searchBarInput.nativeElement.focus();     
      this.renderer2.removeChild(this.searchBar, this.inputHelper);
    },180);
  }

和模板：

<div id="searchBar"> 
  <input type="button" class="button is-link is-light" value="Search" (click)="btnClicked()" (touchstart)="initiateKeyboard()" #searchBarButton>
</div>

您只需要記住iPhone可能會縮放屏幕，因此您需要調整臨時輸入的參數。

工作解決方案： https ://inputfocus.vercel.app/

Answer 6

沒有合法的方法可以做到這一點，因為 iOS 只希望在用戶交互時打開鍵盤，但是您仍然可以通過在click()事件中使用prompt()或使用focus()來實現這一點，並且會出現。

IOS在輸入焦點上顯示鍵盤

問題描述

5 個解決方案

解決方案1
14 2019-03-29 21:46:01

解決方案2
1 已采納 2019-02-01 14:00:10

解決方案3
0 2019-10-22 11:23:35

解決方案4
0 2022-02-27 22:46:23

解決方案5
0 2022-05-31 19:30:54

解決方案6
-1 2019-01-29 15:52:24

IOS在輸入焦點上顯示鍵盤

問題描述

5 個解決方案

解決方案1 14 2019-03-29 21:46:01

解決方案2 1 已采納 2019-02-01 14:00:10

解決方案3 0 2019-10-22 11:23:35

解決方案4 0 2022-02-27 22:46:23

解決方案5 0 2022-05-31 19:30:54

解決方案6 -1 2019-01-29 15:52:24

解決方案1
14 2019-03-29 21:46:01

解決方案2
1 已采納 2019-02-01 14:00:10

解決方案3
0 2019-10-22 11:23:35

解決方案4
0 2022-02-27 22:46:23

解決方案5
0 2022-05-31 19:30:54

解決方案6
-1 2019-01-29 15:52:24