我只想触发tabkey事件,而不关注下一个元素。下面是我尝试过的代码 select2之后没有聚焦。那就是为什么我试图调用tabkey事件。
$('select').select2({
placeholder: 'Select a month'
});
jQuery.extend(jQuery.expr[':'], {
focusable: function(el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keydown', ':focusable', function(e) {
if (e.which == 13 && this.tagName.toLowerCase() != "textarea") {
e.preventDefault();
$(this).trigger({
"type": 'keypress',
which: 9
})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" type="text/css">
<form>
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<select >
<option value="JAN">January</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<select >
<option value="JAN">January</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
</form>
答案 0 :(得分:1)
您可以将自定义参数传递给您的虚假事件,然后侦听所有输入(最好使用委派)以使用制表符keypress
,如果该事件具有特殊参数,则e.preventDefaults()
因此应集中注意不会改变。
答案 1 :(得分:0)
您可以使用like
$('a').on( 'keyup', function( e ) {
if( e.which == 9 ) {
console.log( e.target.href );
}});
答案 2 :(得分:0)
$('select').select2({
placeholder: 'Select a month'
});
$(function() {
$(document).off('keydown ,select2:close', '.form-control,.select2-search__field')
jQuery.extend(jQuery.expr[':'], {
focusable: function(el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keydown ,select2:close', '.form-control,.select2-search__field', function(e) {
if (e.which == 13) {
e.preventDefault();
jQuery.tabNext();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<script src="https://rawgit.com/marklagendijk/jQuery.tabbable/master/jquery.tabbable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" type="text/css">
<form>
<input type="text" class="form-control">
<select>
<option value="JAN">January</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
<select>
<option value="JAN">January</option>
<option value="NOV">November</option>
<option value="DEC">December</option>
</select>
</form>