1. Home
  2. Forums Index
  3. WebmasterWorld / Webmaster General 12:41 am May 21, 2026

Forum Moderators: phranque

Message Too Old, No Replies

Text input is intermittently unable to be clicked, what's up?

         

csdude55

6:04 am on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I'm putting this under General cause I don't know whether the issue is HTML, CSS, or JavaScript. Or other.

I have a PHP script that's opened using jQuery's load(). On this page is an input field with the following HTML: 

<p><b>Username :</b></p>
<div class="inputCon" style="margin-bottom: 12px">
 <input type="text" name="username" size="30" maxlength="50" value="$userID"
  required
  style="width: 200px">
</div>


The "inputCon" class just put a decorative border around the input field. Here's all of the relevant CSS: 

.inputCon {
 display: flex;
 justify-content: center;
 align-items: center;

 box-sizing: border-box;

 border: 1px solid #A9A9A9;
 border-radius: 3px;
 background: #E3E3E3
}

.inputCon input {
 border: 0;
 outline: 0;
 width: 100%;
 padding: 3px;
}

input[readonly] {
 color: #808080;
 pointer-events: none
}

input[type='text'], input[type='password'], textarea, select {
 font: 12px Arial;
 background: #FFF;
 color: #808080
}

input[type='text']:focus, input[type='password']:focus, textarea:focus, select:focus {
 background: #F5F5F5;
 color: #000
}


Nine times out of 10, the input field works just fine. But sometimes, just sometimes! I can't click on it. The text is in black so it's not changed to "disabled", and the pointer changes to the vertical line so it's recognized as text. But clicking it doesn't focus or anything.

While it was inaccessible I went to Inspect Element > Properties and got the following list (you can see "disabled: false", at least).

Any suggestions on what might be causing it, or how to track it down?


accept: ""
accessKey: ""
align: ""
alt: ""
attributeStyleMap: StylePropertyMap {size: 1}
attributes: NamedNodeMap {0: type, 1: name, 2: size, 3: maxlength, 4: value, 5: required, 6: style, type: type, name: name, size: size, maxlength: maxlength, value: value, …}
autocapitalize: ""
autocomplete: ""
autofocus: false
baseURI: "https://www.example.com/link"
checked: false
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: '']
className: ""
clientHeight: 20
clientLeft: 0
clientTop: 0
clientWidth: 206
contentEditable: "inherit"
dataset: DOMStringMap {}
defaultChecked: false
defaultValue: ""
dir: ""
dirName: ""
disabled: false
draggable: false
elementTiming: ""
enterKeyHint: ""
form: form.bg_ff
formAction: "https://www.example.com/link"
formEnctype: ""
formMethod: ""
formNoValidate: false
formTarget: ""
height: 0
hidden: false
id: ""
incremental: false
indeterminate: false
inert: false
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: true
isContentEditable: false
labels: NodeList []
lang: ""
localName: "input"
max: ""
maxLength: 50
min: ""
minLength: -1
multiple: false
name: "username"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextSibling: text
nodeName: "INPUT"
nodeType: 1
nonce: ""
offsetHeight: 20
offsetLeft: 97
offsetParent: div#memberLogin
offsetTop: 116
offsetWidth: 206
outerHTML: "<input type=\"text\" name=\"username\" size=\"30\" maxlength=\"50\" value=\"\" required=\"\" style=\"width: 200px\">"
outerText: ""
ownerDocument: document
parentElement: div.inputCon
parentNode: div.inputCon
part: DOMTokenList [value: '']
pattern: ""
placeholder: ""
previousSibling: text
readOnly: false
required: true
scrollHeight: 20
scrollLeft: 0
scrollTop: 0
scrollWidth: 206
selectionDirection: "forward"
selectionEnd: 8
selectionStart: 0
size: 30
slot: ""
spellcheck: true
src: ""
step: ""
style: CSSStyleDeclaration {0: 'width', accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}
tabIndex: 0
tagName: "INPUT"
textContent: ""
title: ""
translate: true
type: "text"
useMap: ""
validationMessage: ""
validity: ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
value: ""
valueAsNumber: NaN
virtualKeyboardPolicy: ""
webkitEntries: []
webkitdirectory: false
width: 0
willValidate: true

csdude55

6:22 am on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Update: I just discovered that when it's unclickable, for a split second when I open the page the font size in the input field looks normal but after a fraction of a second it kind of jumps and gets a smidge larger.

The Properties are the same either way, though. So that makes me think that the issue is in JavaScript.

Now, I DID do something here recently. I have another thread in the JavaScript forum about a function loaded on the main page not working from within the script loaded via load(), so my workaround was to include the script on the second page, too (running with the logic that, if it's already in cache, then it would be OK): 

// h just plugs in a timestamp to prevent caching while in production
<script src="footer.js?h=012014"></script>

I just now removed that script from the second page, and haven't had the problem with this input field since. So the problem seems to lead back to the same JavaScript problem I've been working on for a dang week :-/

So you can probably ignore this thread, unless something jumps out at you that you think could be causing the conflict.

not2easy

1:51 pm on Nov 14, 2022 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



I once went in circles on a simple html page because a change I made would not show. In the end it was because I had carelessly left off the closing ; in my inline style change, something like yours:
style="margin-bottom: 12px"
There are several such lines in your css, but those lines look like they pertain to .js elements (?)

Browsers are smarter these days and may parse such bu-bus so it might be unrelated, but be careful not to try to validate that stuff. ;)

lucy24

5:38 pm on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I had carelessly left off the closing ; in my inline style change
Yes, that’s why people are encouraged to put a ; at the end of every style, including the last one before the } (where it officially isn't needed) just for safety's sake.

csdude55

6:17 pm on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Humph. Interestingly, I use jscompress.com to compress all of my JS before going live, and it removes the trailing ;!

I went through and added the trailing ; everywhere, though, and that didn't solve this one. It's gotta be related to the footer.js script, though, so I'm going to go through and remove one section at a time in the hopes of narrowing it down.

It's such a pain when there are no errors, I'm going to spend ALL DAY working on this little bug :-/

explorador

7:32 pm on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Unless I'm missing something here, you still have to try without compressing your Js, AND, taking a look at your footer js, because we can't see what's inside of it.

I've had some similar issues in the past, but the usual (correct) way to go is, first finishing your page + scripts, and only then compress whatever elements you want to compress. You might also try avoiding the insertion of that JS at all, or if it's really needed (or for testing purposes) place it inside the page so it loads right away, see what happens, and then try delaying whatever the js does, add like 5 seconds delay and see what happens, this has been useful on some of my scenarios. Also, remove all the external fonts to see if the change of size is related or not.

What does the footer.js do?

csdude55

9:16 pm on Nov 14, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@Fotiman found the problem in the thread I have in the JavaScript forum. In this case, doubling down on having footer.js loaded on both the main page and the second page was causing the problem (not sure why). That was a workaround to get the jQuery function to work on the second page, though, so the real solution was to fix it so that it would work without being included again on the second page.

That seems to have been fixed with this change: 

// original that didn't work everywhere
$('.button').click(function(e) { ... });

// modification that does work
$(document).on('click', '.button', function(e) { ... }

I'm not sure if that's the BEST solution, but it does work. And now the problem in this thread isn't an issue anymore :-)

Thanks for all of the ideas and suggestions, though!

explorador

2:41 am on Nov 15, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Cool!, thanks for the clarification
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. WebmasterWorld / Webmaster General 12:41 am May 21, 2026