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 compatibility.
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.
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 complete code should be:
$(document).ready(function() {
$('select').select2({
shouldFocusInput: function() {
if (Modernizr.touch) {
return false;
}
return true;
}
});
});
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);
});
Related
I need to disable the keyboard tab arrows on IOS using JavaScript or even an web based app meta tag if there is one.
I have tried a few options but have ran into issues when it comes to select menus.
I also cannot revert all of the tabindex's to -1 because this damages tab-ability on a desktop and other devices.
Any help would be appreciated.
This is an excample of what I done for the fields jumping to readonly.
$(document).ready(function() {
$('input, textarea, select').on('focus', function() {
$('input, textarea').not(this).attr('readonly', 'readonly');
$('select').not(this).attr("disabled", "disabled");
});
$('input, textarea, select').on('blur', function() {
$('input, textarea').removeAttr("readonly");
$('select').removeAttr("disabled");
});
});
I actually found a way to do this that works quite while.
What i'm doing is detecting IOS only devices and then disabling the tabbing to input fields.
I suppose I could go a step further and detect IOS and safari.
$(document).ready(function() {
// Detect IOS
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
// Only active input fields in use
$('input, textarea').on('focus', function() {
$('input, textarea').not(this).attr("readonly", "readonly");
});
$('input, textarea').on('blur', function() {
$('input, textarea').removeAttr("readonly");
});
// Disable tabing to select box's
$('select').attr('tabindex', '-1');
}
});
This is an issue that can't be solved by setting a html attribute, meta tag or listening to special events(there is no event for those arrows...).
The only option is to disable all other inputs in the form when a input is focused so that there is no input to tab to.
Instead of writing this code and reinventing the wheel, here's a link to a jquery module that already does this: https://github.com/ChrisWren/touch-input-nav
If you want a pure js solution, have a look at: https://github.com/ChrisWren/touch-input-nav/blob/master/touch-input-nav.js
there isn't that much code that needs rewriting so that shouldn't be an issue.
I am trying to write a code which will make HTML dropdowns readonly but not "disabled" because I want to capture the default values in current form that are coming from previous form.
I have written the below code which is working perfectly fine in Chrome but not working in IE. What could be the possible solution to this.
Below is the jquery code that I have written.
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).on("mousedown", function(e){
return false;
}).on("change", function(){
$(this).find('option').each(function(i, opt) {
opt.selected = opt.defaultSelected;
});
}).css("background-color","grey");
});
Try this one, just disable options which are not selcted
$("#Q4Q25xP1_1,#Q4Q25xP1_2,#Q4Q25xP1_3").find("option").each(function () {
if ($(this).attr("selected") != "selected") {
$(this).attr("disabled", 'disabled');
}
});
and here is the jsfiddle for reference https://jsfiddle.net/3v0w9n3r/
And it works in all browsers including IE.
You can try setting the pointer-events to none using CSS:
<select style="pointer-events:none;">
....
$("#Q4Q25xP1_1, #Q4Q25xP1_2, #Q4Q25xP1_3, #Q4Q25xP1_4, #Q4Q25xP1_5").each(function(){
$(this).attr('disabled','disabled');
}
"Change" event is not consistent in browser,In Firefox and Chrome it work properly
but in IE need to clicked TWICE, first to remove "indeterminate" state, then again to fire the change event. so you need to use trigger click event to click second time so event initialize and work.
So you need to use trigger mousedown for second time apply mousedown event on same element than change event work properly
I'm currently using Mozilla Firefox 14.0.1 and Google Chrome 20.0.1132.57 (latest I think).
My code goes something like this: http://jsfiddle.net/SVtDj/
Here's what I want to happen:
Enter something on input1
Click the disabled input (to trigger the onchange function... see jQuery)
NOTE: After inputting stuff on input1, we click the disabled input, nothing else.
The disabled input should now be enabled. Since by clicking the disabled input, it should trigger the input1's onchange function.
This works in Google Chrome, however, it doesn't work on Mozilla Firefox. How come clicking on the disabled element does not trigger the input's onchange function? This also applies to clicking a disabled instead of a disabled
Disabled inputs do not trigger change and click events on FireFox.
$('li:eq(1)').click(function(e){
if($.trim($('#input1').val()).length != 0){
$('#input2').prop('disabled', false);
}
});
http://jsfiddle.net/SVtDj/10/
instead of trim() you can use jQuery $.trim()function which is cross-browser:
$('#input1').change(function(){
if($.trim($(this).val()).length != 0){
$('#input2').prop('disabled', false);
}
});
demo
Your code is fine. The issue is that .change() requires a lost of focus (blur) before it triggers. Try changing it to .keyup()
http://jsfiddle.net/SVtDj/6/
additional: this is probably the effect you were going for
$('#input1').keyup(function(){
$('#input2').prop('disabled', $(this).val().trim().length == 0);
});
To extend Ramison's answer
If you want to toggle the disability on #input2 you can simple:
$('#input1').change(function(){
var isDisabled = !$.trim($(this).val()).length;
$('#input2').prop('disabled', isDisabled );
});
And the demo: http://jsfiddle.net/SVtDj/7/
The issue is Firefox needs you type 'enter' or do something else so input1 looses the focus after having wrote in input1 to cast the "onchange" event I think. Maybe this question is linked to yours, and it made me try the following that works with Firefox. (I didn't try it on other browsers)
$('#input1').bind('input',function(){
if($(this).val().trim().length != 0){
$('#input2').removeAttr('disabled');
}
});
That's because in FF, when an input is disabled it is really disabled (it doesn't receive mouse clicks).
Clicking on your disabled element doen't produces a blur event (focus lost) on input1, so the onchange doesn't gets fired.
You can workaround this easily with some classes and jQuery. For example:
<input class=disabled id=input2>
some css:
.disabled { background: #888; }
and then...
$(function(){
// disable keypresses on "disabled" input
$('.disabled').keypress(function(e){
e.preventDefault;
e.stopPropagation;
return false;
});
// doesn't allow to focus
$('.disabled').focus(function(e){
$(this).blur();
});
});
to activate the "disabled" element:
$('#input2').removeClass('disabled');
Check it here: http://jsfiddle.net/SVtDj/11/
See the answer of #Andy E in this post Jquery event on a disabled input, i think it is the best solution to resolve your problem.
So I have this very simple JS function that selects all the text in the ASP.NET texbox (input):
function selectAllText(textbox) {
textbox.focus();
textbox.select();
}
..and it gets called like this on the click event:
$("#<%=Textbox1.ClientID %>").click(function () { selectAllText(jQuery(this)) });
The problem is no matter how many times a user clicks in the text box all of the text is always selected. I understand why this is occuring (based on the way my code above is), but it doesn't work well when the user tries to click in the middle of a word to get the cursor back to make a modification to the text.
How do I modify this JS to tell if the text is already highlighted and then deselect the text? This was on subsiquient click, the user can get the single cursor on a precise clicked location to make a modification.
I am trying to get the documentation on the .select() method to see if I could do if(!textbox.select()), but I am having a hard time finding it, so post any doc links as well if you have them.
EDIT: This problem and need for a workaround seems to be for IE (I am using IE9). In Chrome the behavior by default is what I need, but this is for an intranet application that runs on IE, so it appears I need an explicit workaround.
Thanks!
Is it necessary to do the .focus() in this function? You could instead attach a simple .select(); to the onfocus event (.bind('focus', function(){..})): http://jsfiddle.net/EGHzj/
Try this
$(document).ready(function(){
$('input').bind('click',function(){
if($(this).hasClass('selected')){
$(this).toggleClass('selected');
}else{
this.focus();
this.select();
$(this).toggleClass('selected');
}
});
});
This should work in IE also,
http://jsfiddle.net/rAqgw/7/
function selectAllText(textbox) {
// if there isn't selected text.
if (textbox[0].selectionEnd) {
textbox.focus();
textbox.select();
}
}
$('#txt').click(function() {
selectAllText($(this));
});
Live DEMO
I am using jQuery 1.3.2.
There is an input field in a form.
Clicking on the input field opens a div as a dropdown. The div contains a list of items. As the list size is large there is a vertical scrollbar in the div.
To close the dropdown when clicked outside, there is a blur event on the input field.
Now the problem is:
In chrome(2.0.172) when we click on the scrollbar, the input field will loose focus.
And now if you click outside, then the dropdown won't close(as the input has already lost focus when you clicked on the srollbar)
In Firefox(3.5), IE(8), opera(9.64), safari() when we click on the scrollbar the input field will not loose focus. Hence when you click outside (after clicking on the srollbar) the dropdown will close. This is the expected behaviour.
So In chrome once the scrollbar is clicked, and then if I click outside the dropdown won't close.
How can i fix this issue with chrome.
Well, I had the same problem in my dropdown control. I've asked Chrome developers concerning this issue, they said it's a bug that is not going to be fixed in the nearest future because of "it has not been reported by many people and the fix is not trivial". So, let's face the truth: this bug will stay for another year at least.
Though, for this particular case (dropdown) there is a workaround. The trick is: when one click on a scrollbar the "mouse down" event comes to the owner element of that scrollbar. We can use this fact to set a flag and check it in "onblur" handler. Here the explanation:
<input id="search_ctrl">
<div id="dropdown_wrap" style="overflow:auto;max-height:30px">
<div id="dropdown_rows">
<span>row 1</span>
<span>row 2</span>
<span>row 2</span>
</div>
</div>
"dropdown_wrap" div will get a vertical scrollbar since its content doesn't fit fixed height. Once we get the click we are pretty sure that scrollbar was clicked and focus is going to be taken off. Now some code how to handle this:
search_ctrl.onfocus = function() {
search_has_focus = true
}
search_ctrl.onblur = function() {
search_has_focus = false
if (!keep_focus) {
// hide dropdown
} else {
keep_focus = false;
search_ctrl.focus();
}
}
dropdow_wrap.onclick = function() {
if (isChrome()) {
keep_focus = search_has_focus;
}
}
That's it. We don't need any hacks for FF so there is a check for browser. In Chrome we detect click on scrollbar, allow bluring focus without closing the list and then immediately restore focus back to input control. Of course, if we have some logic for "search_ctrl.onfocus" it should be modified as well. Note that we need to check if search_ctrl had focus to prevent troubles with double clicks.
You may guess that better idea could be canceling onblur event but this won't work in Chrome. Not sure if this is bug or feature.
P.S. "dropdown_wrap" should not have any paddings or borders, otherwise user could click in this areas and we'll treat this as a scrollbar click.
I couldn't get these answers to work, maybe because they are from 2009. I just dealt with this, I think ihsoft is on the right track but a bit heavy handed.
With two functions
onMouseDown() {
lastClickWasDropdown=true;
}
onBlur() {
if (lastClickWasDropdown) {
lastClickWasDropdown = false;
box.focus();
} else {
box.close();
}
}
The trick is in how you bind the elements. The onMouseDown event should be on the "container" div which contains everything that will be clicked (ie, the text box, the dropdown arrow, and the dropdown box and its scroll bar). The Blur event (or in jQuery the focusout event) should be bound directly to the textbox.
Tested and works!
I was facing the same situation/problem and I tested the solution from "ihsoft" but it has some issues. So I worked on an alternative for that and made just one similar to "ihsoft" but one that works. here is my solution:
var hide_dropdownlist=true;
search_ctrl.onblur = function() {
search_has_focus = false
if (hide_dropdownlist) {
// hide dropdown
} else {
hide_dropdownlist = true;
search_ctrl.focus();
}
}
dropdow_wrap.onmouseover = function() {
hide_dropdownlist=false;
}
dropdow_wrap.onmouseoout = function() {
hide_dropdownlist=true;
}
I hope this will help someone.
Earlier also I faced such situation and this is what I have been doing.
$('html').click(function() {
hasFocus = 0;
hideResults();
});
and on the input field i will do this
$('input').click()
{
event.stopPropagation();
}
So this will close the drop down if clicked anywhere outside the div (even the scrollbar).
But I thought if someone could provide a more logical solution.
Could you maybe set the blur event to fire on the drop down div as well? This way, when either the input or the drop down loses focus, it will dissapear...
I'm curious...
You're using the last version of every browser, why don't you try it in chrome 4.0.202?
instead of detecting the blur, detect the document.body or window click and grab the mouse point. determine if this mouse point is outside of the menu box. presto, you've detected when they clicked outside the box!
I solved this by doing the following:
#my_container is the container which has the "overflow: auto" CSS rule
$('#my_container')
.mouseenter(function(){
// alert('ctr in!');
mouse_in_container = true;
})
.mouseleave(function(){
// alert('ctr out!');
mouse_in_container = false;
});
And then:
$('input').blur(function(){
if(mouse_in_container)
return;
... Normal code for blur event ...
});
When I select an element in the drop down, I rewrite the code as:
(>> ADDED THIS) mouse_in_container=false;
$('input').attr('active', false); // to blur input
$('#my_container').hide();