Cannot type in input text field

Question

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>

not reproducable. you can test this code by itself and see that it's working. Perhaps you have other contributing factors. — soulshined
– soulshined, Commented Feb 22, 2019 at 20:48
Thanks for the comments. I was posting my code in jsfiddle but then received the answer below. — Alex Brandt
– Alex Brandt, Commented Feb 22, 2019 at 22:49

avaxio · Accepted Answer · 2019-02-22 21:46:49Z

6

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.

answered Feb 22, 2019 at 21:46

avaxio

884 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Brandt Over a year ago

Haha! I tried this already but with z-index: 1. 1000 works! Thank you. Do you know if a higher number for z-index or multiple z indexes demand a longer loading time for the web page in any way?

avaxio Over a year ago

Glad I could help! :) No, I don't think so. Since it's just an attribute to a css file, it simply adds a little more information to a css file. I use it in my work very often to be honest, still haven't noticed any problems with loading. Everything loads pretty smoothly

Md. Harun Or Rashid · Accepted Answer · 2023-04-23 12:14:11Z

3

I faced the same issue. Then I found that I used preventDefault() on keydown event.

document.onkeydown = function (e) {e.preventDefault()}

answered Apr 23, 2023 at 12:14

Md. Harun Or Rashid

2,1884 gold badges23 silver badges38 bronze badges

Comments

pvma · Accepted Answer · 2020-12-05 18:08:56Z

1

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;">

answered Dec 5, 2020 at 18:08

pvma

55111 silver badges18 bronze badges

Comments

Dman Cannon · Accepted Answer · 2021-02-05 07:37:44Z

1

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

answered Feb 5, 2021 at 7:37

Dman Cannon

1267 bronze badges

Comments

Arijit Bag · Accepted Answer · 2022-09-08 07:58:17Z

1

In my case i used Reactjs app for using

<input type="text" title="Search for products, brands and more" autocomplete="off" placeholder="Search for products, brands and more" name="" value="" />

You can see i put value="" so it is blank. That's why it was not working.

answered Sep 8, 2022 at 7:58

Arijit Bag

1707 bronze badges

Collectives™ on Stack Overflow

Cannot type in input text field

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related