web-dev-qa-db-ja.com

select2はページの読み込みにフォーカスを強制します

Select2ボックスをページのロード時にfocused状態で表示しようとしています。私は次を試しました：

$('#id').select2('focus');
$('#id').trigger('click');
$('#id').trigger('focus');

最初の行のみが効果があるようで、select2フィールドにフォーカスしますが、検索フィールドを表示し、検索文字列の入力を許可するには追加のキーを押す必要があります。

したがって、ページを読み込んで「Search」と入力すると、「S」が検索ボックスを開き、残りのキーが入力されるので、「earch」を検索します

jqueryjquery-select2
48
user984976

Select2ドキュメントによると：

$('#id').select2('open');

必要なものはすべて揃っているはずです。

ドキュメント のProgrammatic Accessセクションにあります。

113
Dan-Nolan

これはリリース3.4.2で機能します。いつ正確に実装されたかはわかりません。

$('#id').select2('focus');
28
keaplogik

Select2は独自の入力を作成するため、次のようなものを試してください。

$(window).load(function(){
  $('#id').prev('.select2-container').find('.select2-input').focus();
});
10
Mottie

使用する場合：

$('#id').select2('open');

Select2が開き、検索のために直接入力できます。

使用する場合：

$('#id').select2('open').select2('close');

フォーカスは、作成されたselect2ドロップダウンリストに設定されます。キーボードでEnterまたはCtrl + Arrow downを押すと、開くことができます。

個人的には、これは以下よりも優れていると思いますか？

$('#id').select2('focus');

キーボードでselect2ドロップダウンリストを実際に開くことができないためです。

8
Ralph Jansen

これは私のために働いたものであり、入力フィールドに点滅カーソルも配置しました。注文が重要です！

$('#s2id').select2('focus');
$('#s2id').select2('open');
2
Elon Zito

select2としてのテキストフィールドがあり、次のスニペットを使用して、テキスト入力でカーソルをアクティブにし、フォーカスします。他のすべてのオプションは、select2オプションを開くだけで、期待した動作をもたらさないため、機能しませんでした。

$('#s2id_autogen1').click()
$('#s2id_autogen1').focus()
0
NielsH

Select2ドキュメントによると：

$('document').ready(function(){
   var opencustomer = $("#changedatachange").select2();
   opencustomer.select2("open");
});
0
HARDIK

Select2 4.0では、メソッド.select2（ 'focus'）は何もしません。ただし、私の回避策は、単に「aria-labelledby」属性を持つ「span」要素を取得することであり（値はIDベースであるため、一意であることに注意してください）、それに焦点を合わせます：

var $field = $('select');
$field.select2();
var id = $field.attr('id');
var $spanLabel = $field.next().find("span[aria-labelledby='select2-" + id + "-container']");
$spanLabel.focus();
0
Leonardo Montenegro

すでにDan-Nolanからはよく回答されていますが、Select2を初めて使用する場合は注意する必要があります。htmlオブジェクトは、関数を呼び出す前にselect2で初期化する必要があります。

最終コードは

$('#id').select2();

$('#id').select2('open');
0
Kadeer Mughal

Select2 4.0.2では、select2（ 'focus'）に問題があります。リストはフォーカスされているように見えますが、ENTERを押すとリストが開きません。
それは私にとっての解決策です。

$('#id').select2();
$('.select2-selection', $('#id').next()).focus();
or
$('#id').next().find('.select2-selection').focus();
0
Mariusz Charczuk

私は他の2つの答えを試しましたが、おそらくjsonを介してコントロールを設定し、最初はそれが単なる非表示入力であるため、プログラム的なopenメソッドは効果がなかったため、あまり運がありませんでした.

しかし、私にとっては次のことがうまくいきました：

$(document).ready(function() 
{     
    $('#s2id_autogen1').focus();
});

何らかの理由で同じIDがセットアップにない場合は、select2-focusserクラスが付加されているコントロールを探してください。

0
gts