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 :)
Related
I have an md-autocomplete component pretty box standard :
<md-autocomplete
id="address-autocomplete"
md-input-name="postcodeInput"
md-input-id="postcode-input"
md-input-class="md-input form-control postcode-form-control"
md-selected-item-change="vm.selectedAddressChange(item)"
md-search-text="vm.postcodeQuery"
md-search-text-change="vm.postcodeQueryChange()"
md-item-text="item.Text"
md-min-length="0"
md-items="item in vm.addresses"
md-no-float
md-no-cache="true"
md-clear-button="false"
placeholder="Postcode"
>
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.Text}}</span>
</md-item-template>
<div ng-messages="vm.addressForm.postcodeInput.$error">
<div ng-message="required">This field is required</div>
<div ng-message="validFormat">Please enter a valid postcode</div>
</div>
</md-autocomplete>
However on iphone 13 [maybe other iOs devices]. When I tap on the input field the keyboard starts to come into view and goes away as I lift my finger. If I hold my finger down on the input the keyboard stays, but the input doesn't focus and so the keyboard again goes away. However, if you even slightly move your finger, the input focuses and the keyboard sticks.
I'm not sure if anyone else has this issue, but I've checked the debugger and inspected the element and added breakpoints when attributes change. Not helping because I assume there's something happening async (timeout) that causes this, so when it pauses I don't have this issue.
Tried to add my own custom handlers and still can't get it to work. To hack the MdAutoCompleteCtrl.
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?
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
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!
I started using the jquery ui library to add some enhanced UI elements to the asp.net app. and have run into a minor bug/problem:
I have a jquery UI dialog that is called when a button is clicked..the text for the dialog is all in a and is normaly hidden from the user, and then the jquery UI does its magic and uses that text to display the dialog - all works perfectly.
Here is the code:
<input type="button" value="Cancel This Event" onclick="$('#myCancelEventDialog').dialog('open');" />
and here is the div:
<div id="myCancelEventDialog" title="Cancel an Event or Meeting">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Question is, everytime my form repaints, the "hidden" text actually flashes onto the page for a split second before it becomes hidden again. (i.e. the "are you sre you would like to cancel this event/meeting text actually is visible for a split second)
Is it possible to prevent this?
I set the style on the div to "display: none". The dialog changes this when it displays.
<div id="myCancelEventDialog"
title="Cancel an Event or Meeting"
style="display: none;">
<p>Are you sure you would like to cancel this event/meeting?</p>
</div>
Set the height on the control to zero. This way it renders to the screen at 0 height? This is somewhat of a guess by the way...
Which browser? Also, you can experiment with CSS visibility by setting display:none and undoing that just before you pop up the dialog.