How to enable automatic scroll to focus input when keyboard are open ?
I create a simple demo where are 2 inputs:
<div style="height:300px;"></div>
<form action="/">
<input type="text" />
<br/>
<input type="text" />
<button>ok</button>
</form>
<div style="height:300px;"></div>
When I click on input in the bottom on the page, keyboard open and hide input.
I open from my phone w3s site ant on them when I click on input when it of the bottom of the page browser automatically scrolled it into view.
What I need to do that automatic scroll into view of focus input will start work on my demo ?
I sloved the problem. In my case it was because the body height was smaller then content height. And on codepen I think it was because it render via iframe.
Related
I have created an application in React.js with satisfying all WCGA accessible guidelines. But currently I'm facing some issues like
The keyboard focus always starts from first interactive element (back
button) regardless of the caret/cursor position in the document.
To understand this issue, I am adding a portion of source code where the user can enter their first name and last name. I have also added a back button on the top left of the same page.
Please find the code below:
<section >
<button onClick={()=>this.goback()>Back</button>
</section>
<section >
<form className="form-example">
<fieldset>
<legend>User Details:</legend>
{this.state.errors && this.state.errors.length? <section>
{this.state.errors}
</section> : null}
<section className='input-fields'>
<label> First Name:
<input
type="text"
aria-label='First Name'
id = 'name'
aria-required="true"
onChange={this.onchangeHandler}
value={this.state.firstName}
name="firstname"
/>
</label>
<label> Last Name:
<input
type="text"
aria-label='Last Name'
aria-required="true"
onChange={this.onchangeHandler}
id='lastName'
value={this.state.lastName}
name="lastName"
/>
</label>
<button type="button" id='submit' onClick={()=>this.submitForm()}>Login</button>
</section>
</fieldset>
</form>
</section>
People with visual impairments can become disoriented when tabbing takes focus someplace unexpected, or when they cannot easily find the content surrounding an interactive element. This means when an user places the cursor at the "first name" field and presses the "tab" button, the focus is going to the back button (which is the first interactive element in the page), but it's expected to go to the "last name" field.
scenario
- An html page contains multiple interactive elements. A user with some visual disabilities places the cursor in an element in the middle of the page, and presses tab key to move the focus to the very next element.
Issue
- The focus is going to the top of the page (first interactive element).
Can anyone suggest a solution to fix this issue?
On a site I'm working on, I have a custom search field that the user wants in different places depending on the device. It's a WordPress site and the search is starting off in the header menu. On mobile, it's being moved above the title area/hamburger menu. They also have specifications that the field itself should be hidden until a button is clicked, at which point the field is displayed.
On desktop, before the search form is moved around the DOM, everything is working fine. But on mobile devices, and after the input field itself has been displayed, the blur event is firing about 200ms after the focus event.
After reading this answer: Input field immediately blurs after focus, my guess is that moving the search element around the DOM is causing the issue, but I can't figure out how to fix that without just creating two identical search fields and hiding one depending on screen width. The question/answer I linked doesn't quite fit my scenario the same way, so it didn't really help me get to a solution.
Here's my actual form:
<form role="search" method="get" class="search-form" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="search-form-inner">
<input type="search" value="" name="s" id="s" class="search-form-field" placeholder="Search keolisamericas.com">
<input type="submit" id="searchsubmit" class="search-form-submit search-form-toggle" value="">
<span class="search-form-close search-form-toggle"><span class="dashicons dashicons-no-alt"></span></span>
</div>
</form>
And here's the code that's moving the form:
if (document.documentElement.clientWidth <= 900) {
var $search = $(".genesis-nav-menu .menu-item.search");
$search.detach();
$(".mobile-top-header-nav").prepend($search);
}
Edit: For now, I'm just going with a temporary solution of having two identical forms on the page, and hiding/unhiding them with CSS depending on the screen size. I'd love a more elegant solution than that, and to figure out what's causing my issue to begin with.
I have something like this control:
I need to track focus on any element inside this control. If I focus input or If I focus (click) calendar icon, I want to know that focus performed.
My idea is to add click listener on wrapper of input + calendar trigger. It is some div.
Out of the box I can't add focus listener to the div. To achieve this I need to add tabindex=0 to this div. This method will work, but it has one minus.
For example, I have form with many controls. Example code is below:
<div class="container">
<input onfocus="onFocus()" />
<div tabindex="0" onfocus="onFocus()">some div</div>
<div tabindex="0" onfocus="onFocus(event.target)">
<input onfocus="onFocus()" />
</div>
<input onfocus="onFocus()" />
</div>
When I focus first input and start looping through TAB key I want this behavior: focus calendar icon, focus next input, focus next calendar icon etc. But with tabindex=0 I break this behaviour. You can check it in this pen. You can see this broken behaviour after some div block.
Well, I have another option to add listener specifically for input and calendar icon (or any other icon). The problem is I have dynamic amount of icons on each field. And I have to add focus listener for each. Much simpler for me (and another developers) is the way when I have only one focus listener on the top (as I think).
Is it somehow possible to add ability to add focus listener to the div without breaking focus loop (like I shown on the codepen example).
Use element.addEventListener('focusin', handler). focus and blur don't bubble, focusin and focusout do.
document.querySelector('.container')
.addEventListener('focusin', function(event) {
console.log(event.target)
})
<div class="container">
<input name="a" />
<div contenteditable="true">some div</div>
<div>
<input name="b" />
</div>
<input name="c"/>
</div>
I have a text box in an iframe which is included in a Flex application.
My keyboard events are not getting triggered while i am typing in the text box like Home,End ,Up down arrows..
<input id="addressSearch" type="text" placeholder="Search Location" >
Please help me to get resolved this issue.
I am trying to create a webpage using jQuery mobile, part of my website includes a login feature and I am trying to show the login form in a popup on the page. The button linking to the popup is to be in the header of the page.
My problem is that the popup does not display when I click on the login button :/
I tried to remove the ui-selectmenu-hidden class from the div but that resulted in the popup being displayed without jQuery styles as soon as the page loads.
I know the code I have works without the page or header data-roles as I tested the exact code on another document without those divs.
Here is the code that's giving me the problem:
<div data-role="page">
<div data-role="header">
<h1>Hello World!</h1>
Open Popup
</div>
</div>
<div data-role="popup" id="popupLogin" data-theme="b" class="ui-popup-container ui-selectmenu-hidden popups" data-overlay-theme="a">
<form id="loginForm">
<input type="text" placeholder="Username..." />
<input type="text" placeholder="Password..." />
<input type="button" value="Login" data-theme="b" />
<p>New to The Social Network?</p>
<input type="button" value="Register here" />
</form>
</div>
Any help here would be appreciated. It's likely I've made a silly mistake somewhere, but for the life of me I cannot find it.
If the popup will only be accessed from this one page. Move the popup div inside the data-role="page" div at the same level as the header/content/footer.
If you want to access the login form from several pages, keep the markup as is, but add script on document ready to initialize the widget and enhance the content:
$(function(){
$( "#popupLogin" ).enhanceWithin().popup();
});
DEMO