问题
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