When using Jquery mobile, When you select an option from a select with the keyboard, you cannot tab to the next input in the DOM. If you take out the jquery mobile bits, things work as expected.
I have the following html:
<body>
<input type='text' id='starter' /><br />
<select id='sel'>
<option value=''></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select><br />
<input type='text' id='ender' /><br />
</body>
I have set this up on fiddler with jquery and jquery mobile below:
http://jsfiddle.net/58jkj1wa/ - raw jquery works as expected.
http://jsfiddle.net/a5reojmo/4/ - jquery mobile broken select.
To reproduce the issue perform the following:
The cursor starts in the first input
press 'tab' to move to the select
press down arrow to activate the options
press down arrow to select the first option
press return to accept the change (non mobile - focus is now correctly on the select)
press tab
In the non-mobile version the cursor is now in the second input as expected. In the mobile version it's someplace else... and I don't know where. You have tab a lot for the focus to move to the first input again... then through the inputs to the field you want after the select you just used.
Personally I reckon this is a bug, so the most interfering I felt prepared to do was to try the on change trigger to try and set the focus back to the select like this:
$("#sel").on("change", function (e) {
$("#sel").focus();
});
But this does not work. If you do the focus call anywhere else, it works as expected, highlighting correctly and tabbing off if you do not change the value. but as soon as you change the value the focus is someplace else.
I can set the focus to the next item however:
$("#sel").on("change", function (e) {
$("#ender").focus();
});
But I'd rather not do this as this means I can't do some of the dynamic hiding of inputs I'm doing and have to programmatically mirror the flow handling in the form.
I've tried updating some of wrapper stuff that JQM adds and I've tried setting focus on another input and then back again, and then optionally doing a selectmenu refresh, but the mobile still can't tab out to the next input. I've also tried various blur() and focus() calls all to no avail.
I did see this answer doing something similar by adding a keydown handler, but since I don't know where the focus is after a value change I don't know where to add the keydown handler... besides this sounds like a JQuery Mobile bug doesn't it??
Do you know how I can make tab and focus-highlight work correctly after a select change in JQuery Mobile?
Is this a bug I should report?
Related
I have the following code in my html.
<ion-item (click)="showAddressModal()">
<ion-input [(ngModel)]="address.formattedAddress"
type="text" placeholder="Pick a location for your event">
</ion-input>
</ion-item>
showAddressModal() essentially opens a modal page where the user can search for an address.
Works like charm when I run it on chrome with ionic cordova run browser.
On ioS, however, it takes 2, sometimes 3 clicks to open the modal. First click brings the keyboard up. If I disable the keyboard by using [readonly]="true" on then the keyboard doesn't come up, but I still need 2 clicks. If I disable the entire input using [disabled], it doesn't serve my purpose - cannot click. I have tried moving the (click) from ion-item to ion-input, I have tried removing ion-item altogether, no avail!
Please share your perspective on how I can fix this.
Regards,
J
OK. For now, I've fixed my own problem by removing ion-input altogether and just using ion-text with a (click) listener on it. In lieu of the placeholder, I just show the same placeholder if address.formattedAddress is empty.
Still not sure where the problem is with ion-input and iOS, but will save that problem solving for another day.
For those of you, curious to see the new code, here's what the template code looks like - no change to my component or to the modal itself -
<ion-item (click)="showAddressModal()">
<ion-text inputmode="none">
{{ (address.formattedAddress == "") ? "Pick a location for your event" : address.formattedAddress}}
</ion-text>
</ion-item>
Thanks!
I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.
I have a jqm radio button that looks like this:
<div data-role="controlgroup" data-type="horizontal">
<h3>Type</h3>
<input type="radio" name="type" id="deposit_typeTotal" value="t" checked/>
<label for="deposit_typeTotal">Total</label>
<input type="radio" name="type" id="deposit_typeIndividual" value="i"/>
<label for="deposit_typeIndividual">Individual</label>
</div>
It's part of a phonegap application which I'm currently testing on an android galaxy s2, which is where I'm seeing the problem. I've never been able to get it to break in Google Chrome on the desktop.
I have an click event attached to this button which calls a function which does various things, but I've modified it to alter the title to the value of the button to aid my debugging.
var type = $("#deposit input[name=type]:checked").val(); // Gets the value of the checked button
app.count++;$(".depositOrPayment").html(app.count+"/"+type); // Sets the title of the page
So what I'm seeing is the number of times the function has been called / t or i depending on which button I click. However, sometimes (particularly if I click the buttons quickly) I get undefined as the button's value. Once this happens, it stays as undefined no matter how many clicks I do.
Anybody got any ideas?
Cheers
Graham
There is a difference between click and tap. A tap has about a 300ms delay (around that). Anyway, you can also bind to the tap & click event in JQM (virtual mouse events).
$('#element').on('tap', function() {
...
});
or
$('#element').on('click tap', function() {
...
});
Read this: http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
So there is FastClick https://github.com/ftlabs/fastclick
Check this out What is the difference between the click and tap events?
And this http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
EDIT: I made this a wiki in the hopes that someone can answer it better than me :)
I'm getting this appearance in my form buttons - notice the double text. I'm using a style sheet generated from jQuery Mobile Download Builder (navigation, location push and transitions selected only). It seems to be jQuery Mobile that is causing this. I've tried data-enhanced="false" on the page div but doesn't seem to do anything. I don't want any styling from jQuery, just the navigation for graceful degradation. For styling, I'm using Bootstrap.
See button - http://ma.rtyn.biz/bizness/homepage2/form_button.png
<button type="submit" class="btn btn-default">Add</button>
Can anyone tell me how I can stop this from happening? I'd prefer to use a button tag rather than a link as I want it to submit the form without JavaScript.
I'm using dojox.mobile.SearchBox in Worklight project.
I found out 2 issues.
The first is that the clear button(a small cross in a circle, which must to clear the text in the search box) does not work on the IOS Safari(or in the workilght app which uses safari).
The only thing happens is that the cursor moves to right side of the text are in the search box. That's it. It does not remove the text.
And the second one.
I need to call function by pressing search button on the virtual keybord.
If I set the type="search" in search box - there is no search button on the keybord.
So i put my search button into the .
So search button appears on the virtual keybord.
But after the pressing this button, the form submits and I page reloads.
And I just need to call a function.
I've resolved both issues))
1) About event on pressing Search button(enter)
There is an issue in IOS Safari with appearing "Search button" on virtual keybord.
your text input with type="search" must be inside form tag.
Show 'Search' button in iPhone/iPad Safari keyboard
(second answer)
To call some function on pressing Search button and not submit a form I put the following javascript into the from tag:
<form onsubmit="myFunction(...);return false;">
Pressing Search button starts the Submit action. And this javascript call my function at this time and stop the submitting. That's what I need!
2)
The second problem with clear button of the search box.
This is the bug of dojo. https://bugs.dojotoolkit.org/ticket/16672
I've found a workaround. http://dojo-toolkit.33424.n3.nabble.com/dojox-mobile-SearchBox-Clear-Button-x-fails-in-iPad-iOS-16672-td3995707.html
But I change it a little, cause it does not work in my case.
This is the my variant:
<form onsubmit="myFunction(...);return false;">
<input id="searchBox" ontouchstart="clearButtonSupport(event);" data-dojo-type="dojox.mobile.SearchBox"
data-dojo-props="type:'search'" type="search"
placeholder="Some placeholder...">
</form>
This is the clearButtonSupport function:
function clearButtonSupport(evt) {
require([ "dijit/registry", "dojox/mobile/SearchBox" ], function(registry) {
var searchBox = registry.byId('searchBox');
var rect = document.getElementById('searchBox').getBoundingClientRect();
// if touched in the right-most 20 pels of the search box
if (rect.right - evt.touches[0].clientX < 20) {
evt.preventDefault();
searchBox.set("value", "");
}
});
}
onclick and onmouseup event in IOS safari works only when text input is not focused.
If the focus on the search box(cursor is inside) this event is not thrown.
So i used ontouchstart event
ontouchstart - multitouch event in IOS safari.
It's thrown every time you touch the element.
So I take the coordinates of the first(and the only) touch.
And look if it's less than 20px far away from the right side of the element.()position of the clear button)
And clear the search box.
That's it!