select2 keyboard issue on mobile

你。 提交于 2020-12-31 05:51:27

问题


I have an issue with select2, when it is being used on mobile devices. On click, the virtual keyboard is shown. I tried using something like

$('select').select2({
  shouldFocusInput: function (instance) {
        // Attempt to detect touch devices
        var supportsTouchEvents = (('ontouchstart' in window) ||
                                   (navigator.msMaxTouchPoints > 0));

        // Only devices which support touch events should be special cased
        if (!supportsTouchEvents) {
            return true;
        }

        // Never focus the input if search is disabled
        if (instance.opts.minimumResultsForSearch < 0) {
            return false;
        }

        return true;
    }
});

with no success. Even if I try to simply use

shouldFocusInput: false

the search text keeps getting focused.


回答1:


have you tried

minimumResultsForSearch = -1

post of issue: https://github.com/ivaynberg/select2/issues/1541




回答2:


Try this on mobile see if it works:

var $select2 = $('select').select2();

$select2.on('select2-open', function(e) {
    $('.select2-drop-active .select2-input').blur();
});



回答3:


This worked for me. I apologize for the coffeescript ahead of time.

Instructions in words: when opening the select2 make the input read only. When the input is focused, remove readonly.

$(".location-select").on("select2:open", () ->
  $(".select2-search__field").attr("readonly", true)

  $(".select2-dropdown").bind("touchstart", (e) ->
    $target = $(e.target)
    if $target.hasClass("select2-search__field")
      $target.removeAttr("readonly").focus()
  )
)

$(".location-select").on("select2:close", () ->
  $(".select2-dropdown").unbind("touchstart")
  $(".select2-search__field").removeAttr("readonly")
)



回答4:


Select2 now supports this behavior (see this link for details)

On that link you will find:

For Single Select:

For single selects, Select2 allows you to hide the search box using the minimumResultsForSearch configuration option. In this example, we use the value Infinity to tell Select2 to never display the search box.

$("#js-example-basic-hide-search").select2({
    minimumResultsForSearch: Infinity
});

And for Multi-Select:

For multi-select boxes, there is no distinct search control. So, to disable search for multi-select boxes, you will need to set the disabled property to true whenever the dropdown is opened or closed:

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) {
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
});



回答5:


$(".select2-search input").prop("readonly", true);

Worked fine for me. Make sure you use it after the table's data has been loaded.




回答6:


It may be too late to share this fix.... But i believe it would help someone... The accepted answer removes input box from select2. If you want to remove only the keyboard popup (input focus) in mobile, Just copy and paste the script at the bottom of your page.

<script>
 $(".select2, .select2-multiple").on('select2:open', function (e) {
     $('.select2-search input').prop('focus',false);
 })
</script>



回答7:


I previously answered another question relative to this one.

If you have a problem with the iPad keyboard which hide the bootstrap modal while clicking on the select2 input, I suggest you to check my answer : Select2 doesn't work when embedded in a bootstrap modal.

Good luck :)




回答8:


This works best:

minimumResultsForSearch: Infinity

Here is a handy way to setup select2 boxes.

<script>
            $(document).ready(function() {

                $('.teamsList').val('').change();
                $('.teamsList').prepend('<option></option>').select2({placeholder: 'Select or create new...', allowClear: true, width: '100%', minimumResultsForSearch: Infinity});
                $('.teamsList').prepend('<option value="0">Create new</option>');



回答9:


This code works for me:

$(".select2-selection--single").click(function(){
  $(".select2-search__field").attr("type","number");
});



回答10:


I used an if statement to find out if the input is focused and after that used props to turn its focus to false,It seems to work well.

$('.yourSelect2-continer').on('select2:open', function () {

        if ( $('.select2-search input').is(':focus') ) {

            $('.select2-search input').prop('focus', false);

        } else {

            $('.select2-search input').prop('focus', true);

        }

    })



回答11:


You should get rid of the div containing .select2-search and .select2-focusser. This fixes it:

    $('select').select2(
      minimumResultsForSearch: -1
    )
    .on('select2-opening', function(e) {
      $(this).siblings('.select2-container').find('.select2-search, .select2-focusser').remove()
    });


来源:https://stackoverflow.com/questions/26803202/select2-keyboard-issue-on-mobile

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!