I'm looking for a way to prevent select2's search-input being automatically focussed when the select2-dropdown is opened. I know this is select2's intended default behavior - and while this is fine for desktop clients, I need to prevent this behavior for the iPad where it triggers the iPads software keyboard, which is not what we want as a default.
I've searched for an option to do so with no luck.
http://jsfiddle.net/KwW5n/2/ reflects our setup - we're using a simple -element as a base for our select2-functionality:
$('#source').select2();
This worked for me on select2 v4:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
credit goes to this github comment
Sometimes select2 "steals" focus from other elements. After messing around for quite a bit, I just used this solution below.
At the very end of the event handler for the YourSelect2.on('change', function(){
setTimeout(firstInputFocus, 300);
}
function firstInputFocus() {
$("YourSelect2").focus();
}
By setting this slight delay it works. I am able to change focus away from the dropdown. Following the "change" event for select2, it does something internal to the select2 code which prevents you from IMMEDIATELY changing focus. Inserting this slight delay did the trick for me at any rate.
Ok, I am not sure if changing the focus is possible unless you change the select2 script itself (I could be wrong about this though). As a workaround what you could do is hide the search box by setting minimumResultsForSearch property to a negative value.
<select id="test">
<option>1</option>
<option>2</option>
</select>
And then:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
Fiddle
None of the solutions posted here worked for me so I did this work around:
This will make the search input readonly when opened (prevents keyboard on mobile), then when you click the input it removes readonly and opens keyboard.
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.
Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.
If you want to disable the searchbox and also the auto focus as a text input, e.g. preventing ios browsers to scroll-in the keyboard, use this code:
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
Although #Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.
I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.
In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.
We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.
So we can modify #Choma's answer like this:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
Demo:
https://codepen.io/andreivictor/full/QmKxOw/
Tested on:
Desktop: IE 11, Chrome, Firefox, Opera, Safari
Android 4.2.2
Android 5.0.1 (Samsung Galaxy S4)
Android 6.0.1 (Samsung Galaxy S7 Edge)
iOS 11.2.5 (iPhone 8)
iOS 10.3.2 (iPhone 6 Plus)
iOS 10.3.2 (iPad Mini 3)
I got JQuery's "too much recursion" error in the console when using Choma's solution.
The following worked for me for v4:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.
It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.
Following trick worked for me. You can disable input search field of select2 element :
$('select').on('select2:opening', function() {
$('.select2-search__field').attr("autocomplete", "new-password");
});
setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
maybe someone need~
I've tried this and it works~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
The solution worked perfectly for me. tested on mobile
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
Problem: When I activate jQueryUI tooltip it prevents another script on the page from working.
Description: I have a floating button on a page:
<div id="buttonTOC">
Table Of Contents
</div><!-- End button <div> -->
This is used by the following script to open a hidden div:
jQuery(document).ready(function($){
$("div#buttonTOC").click(function() {
$("div#table-of-contents").animate({height:'toggle'},500);
});
});
This works correctly but if I add a script to use tooltips then it stops functioning and nothing happens on click. The tooltip does work as expected.
I've tried some experiments to get this working including the following attempt to disable 'tooltip' on the div in question but this doesn't make any difference.
jQuery(function($) {
$( 'a#buttonText' ).tooltip({
track: true
});
$('#buttonTOC *[title]').tooltip('disable');
});
I would suspect a conflict between the scripts but then again I assume that something like a tooltip would be able to work regardless of the presence of other scripts.
I'd appreciate any guidance on how to implement this successfully.
Thanks
Your code has a typo:
$( 'p#buttonText' ).tooltip({
track: true
});
It should be a#buttonText, not p
Aside from that, there seems to be no problem with the script.
I updated jquery 1.7 to 1.9
In my old code, I had a function that build my Tabs.
After the first tab was selected and showed me the data, I used this:
$("mytabs").tabs("select",0);
Now, I've changed for this code:
$("#mytabs").tabs("option", "activate", 0);
but don't tab opens I have to click in it and show me the data in the tab.
How I can resolve this problem? I need in jquery 1.9 active tab 0 and show me the data.
I also tried:
$( "#mytabs" ).tabs( "option", "active", 0 );
the same problem
So show me the Tab
then I have to click en first tab and show me the data:
The correct option is active, not activate.
E.g.:
$( "#mytabs" ).tabs( "option", "active", 0 );
jQuery UI 1.9 uses jQuery 1.6. You might be having trouble because you are using the wrong version.
When I load my page the datepicker on my div always show in english, I have to click it to show in other language, as you can see in this fiddle: http://jsfiddle.net/bFHxf/
If you change from div to input there is no problem with it since you have to click it to show... is this some kind of feature or bug?
Any workaround?
I wrapped your code in the $(document).ready() function and that seems to take care of the problem.
http://jsfiddle.net/qtNyr/
Hope that helps!
I think that you are initializing the datepicker too early.
If you wait until the document is loaded, it should work. You can do this by surrounding the existing JavaScript code with
$(function() { existing code goes here });
So the result might look like:
$(function(){
$.datepicker.setDefaults( $.datepicker.regional[ "nl" ] );
$('#date').datepicker({
numberOfMonths: 2,
showButtonPanel: true,
dateFormat : 'dd/mm/yy'
});
})
Link to jsFiddle
My jquery UI datepicker is not showing week numbers, even with the showWeek:true option set. Here is my code:
<script type='text/javascript'>
$(document).ready(function(){
$('#startDate').datepicker({
changeMonth: true,
changeYear:true,
dateFormat: 'd-M-yy',
firstDay: 1,
showButtonPanel: true,
showWeek: true
});
});
</script>
<input type='text' name='startDate' id='startDate'>
From what I understand, you ONLY need to set the showWeek option to make this work - the weekHeading has a default of 'Wk' and the calculateWeekNumber has a built in ISO week number calculator function.
Also, for some reason the 'Today' button on the button panel is disabled?! Any advice would be most appreciated. Thanks.
I think you might be using jQueryUI v1.7.2.
You need v1.8 to get the showWeek option. I have v1.8rc3 and it works well.
demo:
http://jsbin.com/eliki