代码之家 › 专栏 › 技术社区 › ParoX

在隐藏元素上强制制表位?可能吗?

css html javascript

ParoX · 技术社区 · 14 年前

The site is here

我试着强迫他们抽雪茄,但没有抽雪茄。

我想到了在标签前面加一个无意义的复选框,并将其设置为width:1px;和height 1px;,这似乎只适用于chrome&safari。

那么,对于在这些位置强制制表位而不显示元素,您还有其他想法吗?

编辑:

为了以防万一,我使用JQuery在chrome&safari中插入了一些小复选框:

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">');
}

注:$。浏览器.webkit不是真的…所以我不得不用safari

6 回复 | 直到 13 年前

strager 14 年前

tabindex="0" 上 <label> reach无线电输入元件。

Felix Geenen Geo 6 年前

在我的例子中,启用选项卡选择/箭头导航的一个有效解决方案是将不透明度设置为零,而不是“display:none”

.styled-selection input {
    opacity: 0;         // hide it visually
    z-index: -1;        // avoid unintended clicks
    position: absolute; // don't affect other elements positioning
}

Felix Geenen Geo 6 年前

如果将标签与任何字段分开并设置tabIndex,则可以对其进行tab并捕获鼠标和键事件。使用type=“button”, 但随你的便。

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

RoboBear 7 年前

MDN Docs, Forms MDN Docs, Accessible HTML(5) ,以获取有关键盘可访问性和窗体结构的信息。

可访问性部分特别提到的一点是在可能的时候和地点使用HTML5元素——默认情况下,它们通常具有跨浏览器和更易访问的支持(并不总是正确的,但清晰的内容结构和适当的元素也有助于屏幕阅读和键盘可访问性)。

,下面是一个jsidle: JSFiddle::Keyboard Accessible Forms

基本上,我所做的是:

无耻地从一个 一个JSFiddle的Mozilla源代码 (来源于《小提琴评论》)
只读 “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>

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规则 .隐藏-主播:聚焦

Drazen Bjelovuk 5 年前

我的偏好:

.tab-only:not(:focus) {
  position: fixed;
  left: -999999px;
}

<button class="tab-only">Jump to main</button>

Aides Asim K T 9 年前

另一个很好的选择是把你的 输入+除法 在一个标签而不是

此方法甚至允许您使用伪类,如:focus或:checked by using

<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
}

-2

cllpse 14 年前

放弃单选按钮,而是在代码中保留一些隐藏字段,在这些字段中存储UI组件的选定值。