8

有人知道在更改时防止页面跳转到输入的方法吗？特别是如果它使用页面其他地方的标签按钮进行了更改。

这个问题会影响 IE、Chrome Canary、FireFox 以及可能的其他一些浏览器，实际上它似乎不影响的唯一浏览器是 Chrome v28。

您可以在这里看到问题：http: //jsfiddle.net/FgaWM/3/

通常这将是一个有用的功能，但在我的情况下它很烦人，我需要一种方法来防止它/覆盖它。

我试过用 JQuery 强制滚动位置：

var labelPos = $(window).scrollTop();
$(window).scrollTop(labelPos);

这个解决方案......充其量是错误的，导致页面瞬间闪烁。

有人有更好的方法吗？

编辑：我想出了一个解决方案：P

$('label').click(function(e) {
    e.preventDefault();
    var For = $(this).attr('for');
    $('#' + For).trigger('click');
});
4

2 回答 2

8 
$('label[for]').on('click', function (e) {
    var target = window[this.htmlFor];
    target.checked = !target.checked;
    e.preventDefault();
});
于 2013-07-19T17:39:05.150 回答
2

万一它对其他人有帮助......我正在使用带有复选框和收音机的“复选框黑客”（所以接受的答案对我不起作用）并且我的布局一直在跳跃。

这对我有用 https://codepen.io/allicarn/pen/MOgbpg

在标签的鼠标按下时，我将隐藏（和“错位”）输入移动到与标签相同的顶部位置，这样当浏览器自然滚动时，它不需要去任何地方。

转移到这里，为了后代：

(function() {
  $('label[for]').filter(function() {
    var $input = $(window[this.htmlFor]);
    // Collect the labels whos inputs are offscreen and don't align to them
    return ($input.offset().left < 0) && ($input.offset().top != $(this).offset().top);
  }).on('mousedown.init', function() {
    // Move the input so that it is aligned with the label, to prevent scrolling
    $(window[this.htmlFor]).css({
      'position': 'fixed',
      'top': $(this).offset().top
    });
  });
})();
* {
  box-sizing: border-box;
}

.container {
  width: 60%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 3px solid black;
}
.container p:first-child {
  margin-top: 0;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
input[type="checkbox"][id],
input[type="radio"][id] {
  margin: 0;
}

label[for] {
  display: inline-block;
  cursor: pointer;
  border: 1px solid;
  padding: 10px;
  box-shadow: 1px 1px 2px;
}
label[for]:hover {
  box-shadow: 1px 1px 4px;
}

.label-group {
  display: flex;
  width: 100%;
  margin: 20px 0 0;
}
.label-group label[for] {
  box-shadow: none;
  border-left-width: 0;
}
.label-group label[for]:first-child {
  border-left-width: 1px;
}
.label-group label[for]:hover {
  box-shadow: 1px 1px 4px;
}

.border-control:checked ~ .container {
  border-color: red;
}
.border-control:checked ~ .container .border-control__label {
  background: #ccc;
}

.font-control--red:checked ~ .container {
  color: red;
}
.font-control--red:checked ~ .container .font-control--red__label {
  background: #ccc;
}

.font-control--blue:checked ~ .container {
  color: blue;
}
.font-control--blue:checked ~ .container .font-control--blue__label {
  background: #ccc;
}

.font-control--default:checked ~ .container .font-control--default__label {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="hidden1" class="border-control" />

<input type="radio" id="hiddenrad1" name="radioDemo" class="font-control--red" />
<input type="radio" id="hiddenrad2" name="radioDemo" class="font-control--blue" />
<input type="radio" id="hiddenrad3" name="radioDemo" class="font-control--default" checked />

<div class="container">
  
  <!--  Extra stuff to make it scroll  -->
  <div>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
    <p>Consectetur consectetur deserunt est nisi irure ut cillum occaecat duis sit est sunt duis eu in in adipisicing non ullamco proident incididunt cupidatat excepteur pariatur cillum nisi excepteur mollit pariatur dolor.</p>
    <p>Cupidatat est dolore minim nulla velit anim in enim sed excepteur eiusmod ut incididunt id veniam ad tempor culpa est consequat quis voluptate duis adipisicing sed ea aliqua.</p>
    <p>Lorem ipsum consectetur magna culpa reprehenderit ut amet laborum esse aute esse quis sint irure cillum aliqua occaecat enim dolor nisi elit id anim velit sed consequat eu exercitation in ex pariatur velit id deserunt aute duis in pariatur mollit.</p>
  </div>
  
  <!--  These labels control inputs all the way at the top of the pen  -->
  <label for="hidden1" class="border-control__label">Change border color</label>
  
  <div class="label-group">
    <label for="hiddenrad1" class="font-control--red__label">Change font to red</label>
    <label for="hiddenrad2" class="font-control--blue__label">Change font to blue</label>
    <label for="hiddenrad3" class="font-control--default__label">Change font to default</label>
  </div>
</div>

于 2017-10-26T19:49:04.390 回答