Thursday, February 29, 2024
HomeiOS Developmentjavascript - iOs deal with enter and open digital keyboard

javascript – iOs deal with enter and open digital keyboard


What I need to obtain:

I desire a dropdown with a search area the place the main target robotically jumps to the enter area and the digital keyboard of iOs seems for the enter.

The present ingredient with dropdown is created in a WordPress builder with a container div. There i added my searchform.

enter image description here

The place it really works:

Focusing works in all desktop browsers comparable to Chrome, Firefox and Safari with none issues.

iOs will not work:

Solely below iOs there isn’t a focus and no name of the digital keyboard.

I’ve already tried a number of options from Stackoverflow, however with out success. Maybe that is additionally as a consequence of the truth that this ingredient of the theme, which executes the dropdown, and my script don’t harmonize.

The ingredient for the set off and the content material of the container are two totally different components.
(I’ve shortened the weather slightly for simpler presentation.)

Toggle Ingredient:

<div id="bl-search-anchor-toggle" function="button" tabindex="0">
  <div class="x-anchor-content">
     <div class="x-icon"><svg>...icon...</svg></div>
     <div class="x-anchor-text">Search</div>
   </div>
</div>

Dropdown Content material Ingredient
All the pieces below id=”my-content” was added by me.

<div id="bl-search-dropdown">
  <div id="my-content">
     <kind function="search" technique="get" id="searchform" motion="https://...">
    <div>
      <label class="screen-reader-text" for="s">Seek for:</label>
      <enter kind="textual content" worth="" identify="s" id="s" tabindex="-1">
      <enter kind="submit" id="searchsubmit" worth="Search">
    </div>
    <enter kind="hidden" identify="post_types" worth="web page">
    <enter kind="hidden" identify="cat" worth="4"></kind>
  </div>
</div>

The java script i exploit:

window.onload
{
  doc.getElementById("bl-search-anchor-toggle").addEventListener("click on", focus_search());
}

operate focus_search()
{
  const s = jQuery("#bl-search-dropdown #s").get(0);
  s.tabIndex = '-1';     // Appears to be wanted for chrome, firefox, safari too
  s.focus();
} 



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments