javascript - Disable auto focus on drop-down open of select2? - Stack Overflow

admin管理员组

文章数量:1332382

I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:

select2 will not be triggering the native events. select2 will also not be triggering non-native versions of the events, which is less of an issue as we still have the option to add the native events without breaking patibility.

So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.

$("select").select2().on("select2-open",":input",function(){
    setTimeout(function(){
        $(":focus").blur();
    }, 50);
});

Is there any possibility that I could achieve that result above? Thanks.

I tried to disable auto focus of input search inside select2 especially on mobile to disable keyboard popup. However, as documented here:

select2 will not be triggering the native events. select2 will also not be triggering non-native versions of the events, which is less of an issue as we still have the option to add the native events without breaking patibility.

So the only way I could do is to try to get every input box inside select2 that was currently on focused and set lose focus, but has no luck.

$("select").select2().on("select2-open",":input",function(){
    setTimeout(function(){
        $(":focus").blur();
    }, 50);
});

Is there any possibility that I could achieve that result above? Thanks.

• javascript
• jquery-select2

Share Follow edited Oct 11, 2018 at 7:26 vrintle 5,59633 gold badges1818 silver badges4747 bronze badges asked Oct 11, 2018 at 7:21 Houy NarunHouy Narun 1,72599 gold badges4242 silver badges9595 bronze badges 2

• Duplicate: stackoverflow./questions/17995057/…. – andreivictor Commented Oct 11, 2018 at 7:39
• @andreivictor, the answers there does not solve my problem, target version is v4 while I'm using select2 v3, thanks – Houy Narun Commented Oct 11, 2018 at 7:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Finally, I managed to find solution which works just fine for me as below:

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
    $('.select2-search input, :focus,input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard, 50);
});

Tested on Tablet, and iOS device. In function hideSelect2Keyboard(), I searched for every current focus element, include input field which could be used to initialized select2, setting .prop('focus',false) which will remove focus and consequently disable keyboard popup on select2-open and select2-close event, by chaining .blur() is to remove focus border from element. Then I attached this function to select event open and close and it works just fine.

I hope this will help other who searching for this as me too. Thanks.

I think I've found a solution for select v3 - tested in v3.5.4.

We can use the option shouldFocusInput, which must be a function that should return true or false.

So initialize the plugin with the following code:

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      return false;
    }
  });
});

Codepen demo: https://codepen.io/andreivictor/pen/JmNzvb

If you want to disable the auto-focus only on mobile devices, my approach is to use Modernizr library, which can test for the existence of Touch Events in the browser.

So the plete code should be:

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      if (Modernizr.touch) {
         return false;
      }
      return true;
    }
  });
});

this is in the top google results for "select2 disable focus when cleared"

here is the solution for Select2 4.0.0 | Select2 4.1.1

$("select").on("select2:clear", function (evt) {
  $(this).on("select2:opening.cancelOpen", function (evt) {
    evt.preventDefault();
    
    $(this).off("select2:opening.cancelOpen");
  });
});

Source Thread: https://github./select2/select2/issues/3320#issuement-524153140

jump to [kevin-brown - Aug 22, 2019]

seo tldr;

• clear button in select2 4.x causes focus
• stop select2 from regaining focus after clear
• select2 disable focus when cleared

select2 version 4.0.11

This is what worked for me:

$('.select2').on('select2:opening', function (e) {
    // Remove focus from the input when opening
    setTimeout(function() {
        $('.select2-search__field').blur();
    }, 1);
});

I am not sure why, but the above solutions didn't work for me. But this one worked-

$('select').on('select2:open', function (event) {
    $('.select2-search input').prop('focus',false);
});

本文标签： javascriptDisable auto focus on dropdown open of select2Stack Overflow