I'm encountering an issue with a JQuery modal form with many labels and corresponding input fields in it.
The issue occurs when I open the JQuery modal form and scroll down. When I close and re-open the JQuery modal form, the form is auto-scrolled so that the first input field is at the top of the form and has keyboard focus. However, this cuts off the label and header above the first input field.
I have tried $("input").blur(), and that successfully disables keyboard focus on the first input element, but the modal form still automatically scrolls so that the first input form is flush against the top of the screen.
I have also tried placing a hidden input field above everything else in the JQuery modal form, but Firefox is smart about it and still scrolls to the first active non-hidden input element.
Has anyone encountered this situation before, and if so, does anyone know the proper resolution for it?
Issue resolved. I used the scrollTop() method on the JQuery modal dialog div itself, like so:
$("dialog").scrollTop(0);
This is separate and distinct from autofocus/blur issues, as Firefox's autopositioning apparently does not tie with its autofocus.
Related
I have a form, loaded into a modal via AJAX. When the form has loaded and I either tab to the first form text input or set focus to it with JS, JAWS doesn't switch into forms mode, and therefore I can't enter text in the form fields or press Enter on the submit button to submit. When I try to type, JAWS is still in document mode, so it uses the keyboard quick keys to jump around the page.
My markup validates (I can share if needed).
Am I missing something obvious?
In case anyone else suffers the same - the issue was caused by aria-hidden="true" being added to a parent further up the DOM when a modal was opened (originally added to prevent keyboard navigation to elements behind the modal). Removing that, and adding some extra code to trap keyboard focus within the modal and everything works as it should.
I have a small big problem, I have a big form made up of small multiple reusable small forms that I use on other forms. The problem is If I fill in some information in any field and hit tab or select any field to insert data, the browser automatically moves to the top of the form. This action is random and not specific to any field. Any help would be appreciated. I am using EXTJS 6
The problem of you form "autoscroll" is probably caused by validations of fields, i had the same problem using a form with a long scroll.
If you focus a field that can't be blank, and after you scroll down and focus an other field. Your focus will scroll you up because the validation is on blur.
Try to disable on all your fields this property setting it to false. And use a
form.isValid()
to validate your form.
I amusing and Jquery Mobile, bootstrap and ajax to do an app and i encounter this situation in my input area where everytime i click the share button to post some info the the db
the input area keep stacking up each time i click the share button. However, it does not affect my textarea and everytime i refresh the page the input area went back to normal. whats wrong with the input area?
My code: https://jsfiddle.net/k0q06eq2/1/
In my application I have three input fields. If I click on first input field and I did not write any validate data, and then I go to second input field -- it is showing a popup because of validation for change event. Here in this the keyboard that appeared when we click on the first input field is not removed when the popup showed up.
For this I removed the .focus for input field and
I tried like this also:
$('input').blur();
But there is no use I don't understand what is the exact problem it comes in Celkon device. Please suggest me any appropriate solution for this issue.
I have a file input field with opacity: 0; and filter: alpha(opacity: 0); that sits ontop of a large div that I use as a button to select a file, the selected filename is displayed below the button.
All works fine, but when you set the width property of the file element (in this case, the width of the DIV which is underneath it) in IE, part of that width is the text area of the file input. Ofcourse, IE does their own thing, and unlike every other browser, the text-area of the element has to be double-clicked to open the browse dialog. Firefox & Safari will act on a single-click of the text part of the element. I thought I had a workaround since IE allows you to invoke the .click() event on the element.
I tried this:
<input type="file" onclick="this.click();" />
which did nothing, so I tried this:
<input type="file" onmouseup="this.click();" />
Which worked, and the browse dialog was shown with a single click of the text area of the element. But, for some reason when the form is submitted, if there was a file selected, the form would not submit, nothing would happen. If no file was selected, the rest of the form would be submitted.
So now I am back to square one and the left half of my Select File button has to be double clicked to pick a file and the right half can be single clicked. I can't think of any other way to get IE to react to a single click of the element. I tried using the onfocus event to trigger .click() on the element also, which works, but since this upload dialog will be the only thing on the page, and the <input type="file" /> is the first input element being rendered, the click event is triggered when the page loads.
So then I tried attaching to the onload event of the body, and setting focus to something else, but this was too late and focus had already been given to the file input and the browse dialog already opened. I know I am getting close with the onfocus, is there a way to keep the element from having focus when the page loads? Or is there another way to do this that anyone can think of?
Thanks!
[update]
I tried playing with the onfocus again and unfortunately, I was wrong and focus is called to the file element again when the form is submitted, halting the submission and opening the browse dialog again
My favorite solution to formatting html inputs: http://pixelmatrixdesign.com/uniform/