vue.js IOS在输入焦点上显示键盘

70gysomp 于 2022-11-17 发布在 Vue.js

关注(0)|答案(6)|浏览(143)

我有个问题我解决不了。

***input.focus（）***上的键盘未显示在IOS上

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

我一直在寻找一个解决方案，但没有结果。我知道这是一个经常无法解决的问题，但我看到NIKE（https://m.nike.com/fr/fr_fr/）和FOODSPRING（https://www.foodspring.fr/）在移动的上这样做。
所以我想知道他们是怎么做的？

vue.js

来源：https://stackoverflow.com/questions/54424729/ios-show-keyboard-on-input-focus

6条答案

按热度按时间

v440hwme1#

其他的答案对我都不起作用。最后我查看了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

请注意，这绝对是一个黑客的解决方案，但事实上，苹果还没有解决这个问题这么长时间证明它。

赞(0）回复(0）举报 2022-11-17

yqhsw0fo2#

我找到了一个解决办法，click()不起作用，但我找到了。

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

我正在处理vue.js，它在加载组件时删除了input autofocus属性，所以我点击了它，但还有另一个问题，自动聚焦只工作了一次，但结合了focus（），它现在一直工作：）
谢谢你的帮助！

赞(0）回复(0）举报 2022-11-17

nzkunb0c3#

这真的让我/我们抓狂。它在Android手机上运行得很好，但是苹果的开发者禁用了一些东西。（我知道在不必要的时候弹出键盘是很烦人的）。
我无意中发现Semantic-UI的“popup”模块神奇地修复了这个问题。

请注意，此解决方案适用于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模块 Package 了trigger Icon，并通过设置疯狂的偏移量隐藏了Popup内容。然后它神奇地工作了。
请在此处观看演示：https://swimstandards.com/（在iPhone上查看）

赞(0）回复(0）举报 2022-11-17

7gcisfzg4#

Angular 解决方案：
在单击按钮时，我们需要创建临时输入，附加到现有容器（靠近我们输入）并关注它。

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/

赞(0）回复(0）举报 2022-11-17

lstz6jyr5#

在2022年与ios 16工作！天哪，我找了这么长时间，上面的解决方案不会为我工作.
下面是它的工作原理。我将输入封装在一个React FocusLock组件中。查看这个包：https://www.npmjs.com/package/react-focus-lock
下面是一个小例子：