All geek questions in one place

Forced tab on hidden element? Possible?

Site here

I prefer to use shortcuts for radio sharing as custom buttons for them. This means that the radio inputs themselves are displayed: no. Because of this, browsers do not stop at radio shortcuts, but I want them to be.

I tried to get them a tabindex, but not a cigar.

I came up with just putting a useless checkbox right in front of the labels and setting it wide: 1px; and height 1px; which apparently works on chrome and safari.

So, do you have any other ideas for forcing tab stop in these places without displaying an element?

Edit:

Just run someone else, here's how I was able to insert small flags in chrome and safari using jQuery:

if ($.browser.safari) {
    $("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
    $("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}

: $.browser.webkit ...

+3
5

, tabindex="0" <label> .

( 0 , .)

+3

tabIndex, . = "button", .

<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
+2

- + div , 0px : none

: focus : checked : + styleDiv

<label>
    <input type="radio">
    <div class="styleDiv">Display text</div>
</label>

input
{
    width: 0px;
    height: 0px;
}

input + .styleDiv
{
    //Radiobutton style here
    display: inline-block
}

input:checked + .styleDiv
{
   //Checked style here
}
0

, , , . Mozilla " MDN" , "" , "" MDN, HTML (5), , .

"" HTML5, , - - ( , ).

, JSFiddle: JSFiddle::

, :

  • Mozilla JSFiddle ( )
  • TEXT- readonly "HTML5
  • tabindex = "0" readonly
  • CSS " " , "" "

HTML

<title>Native keyboard accessibility</title>
<body>

  <h1>Native keyboard accessibility</h1>

  <hr>

  <h2>Links</h2>

  <p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

  <p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>

  <h2>Buttons</h2>

  <p>
    <button data-message="This is from the first button">Click me!</button>
    <button data-message="This is from the second button">Click me too!
    </button>
    <button data-message="This is from the third button">And me!</button>
  </p>

  <!-- "Invisible" HTML(5) element -->
  <!-- * a READONLY text-input with modified CSS... -->
  <hr>
  <label for="hidden-anchor">Hidden Anchor Point</label>
  <input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
  <hr>

  <h2>Form</h2>

  <form name="personal-info">
    <fieldset>
      <legend>Personal Info</legend>
      <div>
        <label for="name">Fill in your name:</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="age">Enter your age:</label>
        <input type="text" id="age" name="age">
      </div>
      <div>
        <label for="mood">Choose your mood:</label>
        <select id="mood" name="mood">
          <option>Happy</option>
          <option>Sad</option>
          <option>Angry</option>
          <option>Worried</option>
        </select>
      </div>
    </fieldset>
  </form>


  <script>
    var buttons = document.querySelectorAll('button');

    for(var i = 0; i < buttons.length; i++) {
      addHandler(buttons[i]);
    }

    function addHandler(button) {
      button.addEventListener('click', function(e) {
        var message = e.target.getAttribute('data-message');
        alert(message);
      })
    }
  </script>

</body>

CSS Styling

input {
  margin-bottom: 10px;
}

button {
  margin-right: 10px;
}

a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}


.hidden-anchor {
  border: none; 
  background: transparent!important;
}
.hidden-anchor:focus {
  border: 1px solid #f6b73c;
}

, CSS .hidden-anchor: focus, , . , "" , - .

, !

0

Cancel the radio buttons and instead; save the hidden fields in the code in which you save the selected value of the components of your interface.

-1
source

Source: https://habr.com/ru/post/1760894/

More articles:


All Articles