IOS Tastatur bei Eingabefokus anzeigen

Question 1

Ich habe ein Problem, das ich nicht beheben kann.

Tastatur wird nicht angezeigt input.focus() auf IOS

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

Ich habe ohne Ergebnis nach einer Lösung gesucht, ich weiß, dass dies eine häufig ungelöste Frage ist, aber ich verstehe NIKE (https://m.nike.com/fr/fr_fr/) und NAHRUNGSQUELLE (https://www.foodspring.fr/) macht es auf dem Handy.

Da frage ich mich, wie machen die das?

Question 2

Keine der anderen Antworten hat bei mir funktioniert. Am Ende habe ich mir den Javascript-Code von Nike angesehen und das ist, was ich als wiederverwendbare Funktion gefunden habe:

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

Beachten Sie, dass dies definitiv eine Hacky-Lösung ist, aber die Tatsache, dass Apple dies so lange nicht behoben hat, rechtfertigt dies.

Question 3

Ich habe eine Lösung gefunden, click() hat nicht funktioniert, aber ich habe es herausgefunden.

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

Ich habe mit vue.js gearbeitet, das Eingaben entfernt hat autofocus -Attribut, wenn die Komponente geladen wurde. Also hatte ich es auf Klick, aber es gab ein anderes Problem, der Autofokus funktionierte nur einmal, aber in Kombination mit focus () funktioniert es jetzt die ganze Zeit 🙂

Danke für Ihre Hilfe !

Question 4

Das macht mich/uns wirklich verrückt. Auf dem Android-Handy funktioniert es einwandfrei, aber der Apple-Entwickler hat etwas deaktiviert. (Ich verstehe, dass es ärgerlich ist, die Tastatur zu öffnen, wenn dies nicht erforderlich ist).

Ich habe zufällig herausgefunden, dass das “Popup”-Modul von Semantic-UI dies auf magische Weise behebt.

Beachten Sie, dass die Lösung für SemanticUI funktioniert (@semantic-ui Team kann sagen, welches Ereignis diese Arbeit macht)

So habe ich es gemacht:

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} />}

Wie Sie sehen, habe ich das Trigger-Icon mit dem Popup-Modul umschlossen und den Popup-Inhalt ausgeblendet, indem ich den verrückten Offset gesetzt habe. Und dann funktioniert es auf magische Weise.

Sehen Sie sich die Demo hier an: https://swimstandards.com/ (überprüfen Sie es auf Ihrem iPhone)

Question 5

Winkellösung:

Beim Klicken auf die Schaltfläche müssen wir eine temporäre Eingabe erstellen, an einen vorhandenen Container (in der Nähe unserer Eingabe) anhängen und uns darauf konzentrieren.

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

Nachdem die Modal-/Zieleingabe angezeigt wird, verschieben wir den Fokus und entfernen den temporären:

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

und Vorlage:

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

Sie müssen nur daran denken, dass das iPhone den Bildschirm zoomen kann, also müssen Sie die Parameter der temporären Eingabe anpassen.

funktionierende Lösung: https://inputfocus.vercel.app/

Question 6

Es gibt kein legitim Möglichkeit, dies zu tun, da iOS die Tastatur nur bei einer Benutzerinteraktion öffnen möchte, aber Sie können dies immer noch mit beiden erreichen prompt() oder verwenden focus() von innen a click() Event it und wird auftauchen.