I have a form that uses tabindex to logically traverse through the input fields in the form. However, within my form there is a jQWidgets grid that also applies tabindex to its elements. As my input fields are nested within div's, the tabindex order is being messed up so instead of traversing in the correct order, when using the Tab button, the focus jumps about the page.
Can anybody see of a way, either using HTML or Javascript (jQuery), to prevent this from occuring?
I have tried nesting the grid further down the DOM but this had no affect...
The structure of the HTML must remain the same for all of the input fields
You can see this here: http://jsfiddle.net/TN7xL/1/
Or alternatively, here is a sample of my code (I have stripped out all irrelevant id's and classes):
<form>
<div class="row">
<div class="column">
<div>
<label for="foo">Foo</label>
<div>
<input type="text" id="foo" name="foo" tabindex="1" />
</div>
</div>
<div>
<label for="bar">Bar</label>
<div>
<input type="text" id="bar" name="bar" tabindex="2" />
</div>
</div>
</div>
<div class="column">
<div>
<label for="name">Name</label>
<div>
<input type="text" id="name" name="name" tabindex="3" />
</div>
</div>
<div>
<label for="surname">Surname</label>
<div>
<input type="text" id="surname" name="surname" tabindex="4" />
</div>
</div>
</div>
</div>
<!-- THERE ARE MORE ROWS AND COLUMNS IN MY FULL SCRIPT -->
<div id="grid" class="row">
<!-- THE FOLLOWING IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
<div tabindex="0">
<div tabindex="1">GRID HERE</div>
</div>
<!-- THE ABOVE IS AUTOMATICALLY GENERATED BY JQWIDGETS -->
</div>
<div class="row">
<div class="column">
<div>
<label for="field">Another Field</label>
<div>
<input type="text" id="field" name="field" tabindex="5" />
</div>
</div>
</div>
</div>
</form>
My aim is to effectively ignore the tabindex's that are set by the jQWidgets grid, but I cannot see a way to do this...
Just because you don't know what jqWidget tabindex is set, I use this strategy:
1- I give my tabindex order to every input that I introduce,
2- I give them a "tabindex" class,
3- I remove every tabindex that is not what I have introduced after every jqWidget initialization.
<html>
<input type="text" class="tabindex" tabindex="2" />
<div id="split"> ... </div>
<script>
$("#split").jqxSplitter(settings);
// Delete every tabindex introduced by jqWidgets
$("[tabindex]:not(.tabindex)").removeProp("tabindex").removeAttr("tabindex");
This solution works pretty well with almost every jqWidget component.
In grid or in every loop situation you can use knockout with data-bind "attr: {class 'tabindex', tabindex: $index}"
Known Bug:
If you have a Navigation Bar, tab jumps from it to address bar.
my 2 cents
N
You may remove the auto-generated tabindex by using the jQuery's removeAttr method. http://api.jquery.com/removeAttr/
After looking into this, it is clear that the only solution is to get rid of the tabindex's on any elements within the grid. I therefore implemented the following code to select any element within the grid (when it is initiated) that has a tabindex set, and then I remove it.
ready: function(){
// Remove any tabindex's set by the grid
$('#grid [tabindex]').removeAttr('tabindex');
}
$(document).ready(function(){
$('input').removeAttr("tabindex");
});
Related
#input{
display: inline-block;
}
<div>
<div>
<input type="radio">
<label>Item 1</label>
</div>
<div class="inputClass">
<div id="input">Some text</div>
<div id="input"><input type="text"></div>
</div>
<div>
<input type="radio">
<label>Item 2</label>
</div>
</div>
In the above HTML snippet, is there any way I can restrict tabbing to the input inside .inputClass?
Please note that in the actual code I have no way of knowing if .inputClass will hold an input box or not. It could be a button, dropdowns etc or any other tabbable element. So I can't apply tabindex=-1 to the element(s).
Also, please note I don't want a jQuery solution.
I am using Materialize as a front-end framework for my project.
I have used their auto-complete input field for this purpose and I am providing the data for that auto complete input field through JSON. It is working fine but now I want to add another autocomplete input-field like that and I am using jquery's append method for that.
I am getting the structure for the input field but unfortunately the dropdown isn't showing up. When i inspected the elements in the browser, I saw that the dropdown for the dynamically generated input field is not showing up. Below is the code for the input field.
HTML and CSS
<div class="row">
<div class="col s4 offset-s4">
<a class="btn grey darken-3 squared left" id="add">add</a>
</div>
</div>
<div class="row" id="dynamic">
<div class="col s2 offset-s2">
<input type="text" id="autocomplete-input" class="autocomplete input-item" name="item">
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function(){
var i = 1;
$("#add").click(function(){
i++;
$('#dynamic').append('<div class="col s2"><input type="text" id="autocomplete-input" class="autocomplete input-item" name="item"></div>');
});
});
Any help would be appreciated.
I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.
For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010
I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>
Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>
I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)