CODEWITHSUNDEEP
javascriptandroidjqueryhtmlcss
dingo_d
dingo_d

Reputation: 11670

Click on input field triggers window resize

I have a header with logo, menu and search. When I'm on desktop I have all elements shown in that order, but if my window width is less than 980px, the menu hides (get's a toggle), and the logo is detached from the nav and attached after the logo. If the width is greater the logo is again detached and attached to the old place in the DOM.

    $(window).on('resize', function() {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
    });
#logo {
  display: block;
  margin: 10px auto 15px;
  text-align: center;
}
#search-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 10px;
}
#search-container .header_search {
  display: inline-block;
  line-height: 6px;
}
#search-container input {
  border: 0;
  background-color: transparent;
  font-style: italic;
  color: rgb(114, 114, 114);
  color: rgba(114, 114, 114, 0.5);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
}
#search-container input:active,
#search-container input:focus {
  outline: none;
  border: 0;
}
#search-container .submit {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
}
#search-container .submit i {
  color: #d3031c;
  font-size: 26px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>

<div class="menu_wrapper">
  <nav>
    <ul id="main_menu" class="">
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
    <div id="search-container" class="search-box-wrapper hide">
      <div class="header_search">
        <form name="search" id="search" method="get" action="#">
          <input name="s" type="text" placeholder="Search" value="Search">
          <a class="submit"><i class="fa fa-search"></i></a>
        </form>
      </div>
    </div>
  </nav>
</div>

Now the issue happens on mobile phones (and from the feedback, only on Android), when you tap on the input field to enter the search query, resize is being activated, and the search container detaches and attaches itself in the same space. And I have no idea why this happens. When I comment the part of the jquery code with the resize, I can type in the input field without the problem.

Why is resize being triggered on click? I checked the media queries, and I am not expanding the element in any way.

Upvotes: 7

Views: 4866

Answers (4)

Sharath Telu
Sharath Telu

Reputation: 11

On iphones, if the font-size of input-field is less than 16px, the 'ios' auto zooms the page. Set the font-size of input-field to 16px to tackle this problem.

Upvotes: 0

JediCate
JediCate

Reputation: 500

It took me a while to realize that the mobile keyboard was triggering a resize event. I found out just by commenting out the resize functionality. I have two search inputs on the page and funny enough this problem happens to only one input, the one that I was moving in to a side menu on resize.

So what worked for me was to create a global boolean that would be true if my input was clicked. Then in my resize function i check if my boolean is true and if it is I force focus the input, if it is not then I execute the resize logic.

var isClicked = false;    
function resize(){  
  if(isClicked){
      $('#search-input').focus().select();      
  }else{
    //resize logic
  } 
}
document.addEventListener("DOMContentLoaded", function(event) { 
    $('#search-input').click(function(){
        isClicked = true;
    }); 
    resize();   
});

Upvotes: 1

Matt Pennington
Matt Pennington

Reputation: 582

This is happening because the soft keyboard opens when the input element is clicked. Apparently resize triggers on a multitude of events, as described here: https://www.quirksmode.org/dom/events/resize_mobile.html.

Your solution works, but you could also use this approach, i.e.

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if( $(document.activeElement).prop('type') !== 'text') {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
   } 
}

Upvotes: 4

dingo_d
dingo_d

Reputation: 11670

I still have no idea why this happens (the resize), but I found a solution:

I am turning off the window resize on $('#search-container') click event:

$('#search-container').on('click', function(){
    $(window).off('resize');
});

Stops the window from resizing (which was causing the issue), and you can type on android with ease now :)

Upvotes: 5

Related Questions