Menu
I have a dynamic html page, and I have an element (div.id=myComponent) in this html, that has three input element inside.
The direction of the body element is rtl and div.id="myComponent" element is ltr like this:
<html>
<body style="direction: rtl;">
<input type="text" /> <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
...
<!-- any elements -->
<div style="direction: ltr;" id="myComponent">
<span> <input tabindex="3" type="text" placeholder="y" /></span>
<span><input tabindex="2" type="text" placeholder="m" /></span>
<span><input tabindex="1" type="text" placeholder="d" /></span>
</div>
<input type="text" />
...
</body>
</html>
I need it, when the focus enters the div.id="myComponent", like below:
d => m => y
but is reverse.
I use the tabindex attribute, but it is not working correctly.
How do you fix this problem?
Thanks.
200
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). The tabindex attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).
non-standards-compliant: set the tabindex attribute on a DIV . This will work in all common browsers. standards-compliant: replace DIV by an anchor element ( A ) without a href attribute set, style it with display: block and add the tabindex attribute.
The only way to change this order is to reorder your HTML elements. tabindex itself can do 2 things: it sets the order of "focusable" elements. it makes element "focusable".
Use the tabindex attribute in HTML to set the tab order of an element. It gives you the authority to change the order of your TAB usage on the keyboard.
Remove direction from div.id="myComponent" setting multiple direction will cause problem or is confusing. Rearrange the #myComponent elements.
<body style="direction: rtl;">
<input type="text" /> <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
...
<!-- any elements -->
<div id="myComponent" >
<span><input type="text" placeholder="d" /></span>
<span><input type="text" placeholder="m" /></span>
<span><input type="text" placeholder="y" /></span>
</div>
<input type="text" />
</body>
Working example can be found at here
Update:
To set ltr direction to elements inside #myComponent use following css property -
#myComponent > *{
direction: ltr
}
To preserve the element placing direction in 'ltr', wrap the span elements inside other div with property float:left.
The updated example can be found at here
139
You just simple to change your tabindex
<html>
<body style="direction: rtl;">
<input type="text" /> <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
...
<!-- any elements -->
<div style="direction: ltr;" id="myComponent">
<span> <input tabindex="1" type="text" placeholder="y" /></span>
<span><input tabindex="2" type="text" placeholder="m" /></span>
<span><input tabindex="3" type="text" placeholder="d" /></span>
</div>
<input type="text" />
...
</body>
</html>
Please try to focus on your div first by JS script
document.getElementById("myComponent").focus();
And tabindex should work like you expect
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
