How to trigger focus on input with monaca? - javascript

I am using Onsen UI and Monaca to build a mobile app for iOS and Android. I would like to set focus on the #search-cities input field, once the #search-city page is visible.
I've tried:
$(document).on('pageinit', '#search-city', function() {
console.log('pageinit: #search-city');
// doesn't work!
$('#search-cities').focus();
});
I am testing it on iOS and focus() doesn't set the search field on focus. Is there any way to do this with the onsen/monaca framework?

I know this question was asked few months ago,
this is still posted in case someone still looking for solution.
In case you keep failing to autofocus input fields on iOS device.
Cause:
Cordova iOS Configuration KeyboardDisplayRequiresUserAction was set as true (default to true)
There is already an answer for this question.

The code you wrote should work fine. I made a element with id my-page that contains an input element with id my-input.
In the JavaScript:
$(document).on('pageinit', '#my-page', function() {
$('#my-input').focus();
});
But this is exactly what you did so I don't understand why it isn't working in your case.
Working example:
http://codepen.io/argelius/pen/jPXoNN

Related

Form inside Owl Carousel version 1&2

I am building a simple form inside an Owl Carousel but I can't get it to work on their version 2.
The problem is when the user click inside the input type on the second version the console log gives an error :Uncaught TypeError: Cannot read property 'name' of undefined.
on the first version everything works fine. Here is a fiddle for v1 I was just wondering if somebody can take a look, I tried using mouseDrag:false but it doesn't do the trick.
And here is the link for version 2 and the code goes like this:
$(document).ready(function () {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
mouseDrag:false
});
// Go to the next item
$('.customNextBtn').click(function () {
owl.trigger('next.owl.carousel');
})
});
This post is over 3 years old, but I came across the same issue. It took me hours to find a solution, so I want to share it with anyone who might be interested.
I don't know what exactly causes the error, but I figured that the error is thrown whenever the focusout event is triggered. Unfortunately, preventing focusout from bubbling didn't solve my problem.
After browsing the project's issues on GitHub, I came across this article where user with nickname "ghost" suggests a solution. The problem can be avoided by disabling onclick and onchange events of the input.
This code worked for me:
$("#controls").on('click change', function(event) {
event.stopPropagation();
});
where #controls is a <div> wrapper around all my form controls

Multiple timepickers in the same page bug

I notice a strange behavior when there are multiple timepickers in the same page.
After switching between the two timepickers, eventually one of them isn't removed/hidden, and will persist till we refresh the page.
I thought it was a problem with my code but then i did a test with a simple bootstrap example i found on google.
Fiddle bug example:
http://jsfiddle.net/kW3G7/282/
The only code that is used is:
`$('.timepicker').timepicker();
Thanks in advance.
Edit: i created a issue in there github project
Edit 2: It seems that the timepicker stops calling the document onclick event(code above)
$(document).on('mousedown.timepicker, touchend.timepicker', function (e) {
// This condition was inspired by bootstrap-datepicker.
// The element the timepicker is invoked on is the input but it has a sibling for addon/button.
if (!(self.$element.parent().find(e.target).length ||
self.$widget.is(e.target) ||
self.$widget.find(e.target).length)) {
self.hideWidget();
}
});
Solution, for now, remove the "touchend.timepicker" from the "on" event trigger.
I don't think it is the proper/final solution but it seams to work.

Disable WordPress' wp_attempt_focus()

What I have:
A standard log-in page (specifically, the default WordPress wp-login.php page).
Here are two live examples:
https://twentyfourteendemo.wordpress.com/wp-login.php
http://demo.opensourcecms.com/wordpress/wp-login.php
What I need:
I need to disable the auto-focusing of the first textbox in the form.
What I've tried:
I've attempted a hidden or off-screen positioned textbox to steal focus.
I've attempted setting the tabindex of all inputs to -1 (very unideal).
I've attempted using .blur() on the auto-focused textbox.
None of the approaches work.
For those coming from Google, there is now a hook for this in the core (correct from V5.2, could be earlier!).
wp-login.php:1149 enable_login_autofocus : Boolean
add_filter('enable_login_autofocus', '__return_false');
Will disable the autofocus javascript snippet
I've posted a few solutions on the WordPress SE here. Basically there are two ways around it (in WordPress 4.0) that don't involve changing the code itself. Kill the function altogether using a dirty hack:
add_action("login_form", "kill_wp_attempt_focus");
function kill_wp_attempt_focus() {
global $error;
$error = TRUE;
}
Or use Geeklab's solution to modify the HTML code through buffering, allowing you to specifically kill the autofocus. Good luck!
I've found a solution based on charlietfl's setTimeout function.
setTimeout(function() {
$( '<input type="text" id="focusfix" style="position:absolute; top:-1000px;"/>' ).insertBefore( "#loginform #user_login" );
$('#loginform #focusfix').focus();
$('#loginform #focusfix').select();
}, 205);

Dojotoolkit watch() not working on switch

I have a very annoying problem with watch() method from Dojo toolkit. I have a loop, that connects every input/widget in settings view (TweetView) with corresponding object. Connecting in my case is setting input to value from object and watch it for changes.
My problem is, that it works great for slider, but doesn't trigger handler for switch at all. Any ideas what could be wrong? I tried to debug it, but still no results. Here is a fiddle and the code:
var widget = registry.byId(namespace + "." + el);
widget.watch("value", handlers[root[el].type]);
widget.set("value", root[el].value);
http://jsfiddle.net/Em8GE/1/
Thanks in advice,
Dracco
this is unfortunately a known issue in dojo 1.9.0 and 1.9.1: https://bugs.dojotoolkit.org/ticket/17295
This is already fixed on dojox main branch and will be released in 1.9.2. The fix is detailed here: https://github.com/dojo/dojox/commit/43af4ba56f7b589f2afffb9161e21cc2cad40ad8

JQuery UI autocomplete NOT WORKING with Chrome on mac OSX

That's really really weird.
In the web app I did (look here), thanks to cloudant guys for free hosting, I finally implemented Jquery UI Autocomplete widget.
I'm using backbone as a framework.
What is really really weird is that IT WORKS WITH EVERYTHING (even IE9!) except CHROME on apple OS.
What I have is that no dropdown list appears when clicking on the text input field.
Chrome on a different OS wokrs (e.g. on win7).
This is the code I use to implement the widget, I report her ejust for the sake of completeness, even if I suppose that that the problem I have DOES NOT depend on the code.
$(select).on("click",function(){
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
---- UPDATE ------
I made a comparison btw chrome running on ubuntu and chrome running on macosx.
The result is that under ubuntu, the DOM element gets created (before closing the body tag), while under macosx the DOM element IS NOT created at all.
It looks like under macosx the onclick event is not catched.
I found a really helpful post here
Why does select box on mac chrome doesn't respond to click event?
Basically, it is a bug of chrome under OSX.
As #JamWaffles explains in its answer,"IIRC, the click event works for s in Firefox, however does not work in Chrome. The best, most supported event is change." and it turns out to be completely true!!
So the working code for my webapp is:
$(select).change(function(){//**************CHANGE AND NOT ON('CLICK', ... *******
var valori=["ex1", "ex2", "ex3"];
$(input).autocomplete({
minLength: 0,
source: valori,
focus:function(){
},
select:function(event, ui){
var categoria=$(select).attr('value');
var valore=ui.item.value;
self.model.set({category:categoria, value:valore});
//~ console.log(self.model);
return true;
}
}).focus(function() {
$(this).autocomplete("search", "");
});
});
Hope this answer is useful for somebody else.

Categories