Cannot type in input text field

问题

I am not able to type in the input field. When I remove the first div that has the id="viewport" I am able to type in the input field. How am I able to solve this?

<div id="viewport"></div>
<div class="form">
  <h2 id="h2">Need a project from<br>Google Cloud Storage?</h2>
  <form id="fileDownloadForm" method="GET" action="downloadBlob2" enctype="multipart/form-data">
    <input type="text" id="textBox" name="objectToSearch" placeholder="Type the name of the project here." />
    <button id="downloadBtn" type="submit" class="btn btn_primary">Download</button>
  </form>
</div>

回答1:

You may solve this by adding css attribute #textBox{ z-index:1000; }. It seems that viewport block is too big and overflowing the input field. z-index makes the input field more "important" - the bigger it is, the more important the element becomes.

回答2:

just in case to others, what works for me is putting in the immediate tag. So in this case I will try to put it in:

<div class="form" style="z-index: 1000 !important;">

回答3:

In my case, somehow the text color changed to white. I found it by accidentally double-clicking the input field after typing few characters.

来源：https://stackoverflow.com/questions/54834898/cannot-type-in-input-text-field