I would think this is a common pattern:
I have a jquery mobile searchbox <input type="search"...>
When entering enter, the submit is performed, but the keypad remains (on my android)
Keypad is hidden in my development envirnoment on desktop.
After lots of seaching, I've tried:
if (e.keyCode == 13) {
console.log("Im here");
$('.ui-input-text').trigger('blur');
$(this).trigger('blur');
$("input").trigger('blur');
$("#goSomewhereElse").focus();
$('input#SearchText').blur();
}
Nothing seems to work. Any suggestions on how to hide the keyboard?
if (event.keyCode == 13)
{
window.location.hash = '#submit_chat_msg';
}
where 'submit_chat_msg' is ID of a button or something else.
Related
I am using Meteor Framework.
The following code
123-456-7890
or
(123) 456-7890
Initiates a call automatically in iOS.
I need some kind of warning.. such as pop up saying
Call 123-456-7890 ?
and if the user wants to call then they can press Call or else Cancel.
How do I fix this on iOS?
You have two options.
First, you could wrap the call link inside a pop up or modal. In your template:
<a class="open-popup">Call 123-456-7890</a>
Open the pop up via click event. In Meteor you can do this like this:
Template.myTemplateName.events({
"click a.open-popup": function(event) {
// Open pop up ...
});
In this pop up you place the link 123-456-7890 alongside with a cancle button, which is nothing else than a pop up closer. <a class="close-popup">cancle</a>
Second, use a click event with confirm() function and then do a url redirect to the `tel://ยด address.
Template.myTemplateName.events({
"click a.open-popup": function(event) {
var r = confirm("Call 123-456-7890 ?");
if (r == true) {
let phoneNumber = "123-456-7890";
window.location.href="tel://"+phoneNumber;
} else {
// closes
}
});
I guess, the second option is easier to implement and already does, what you are looking for.
I'm using a commonly used ionic directive to set focus to a textarea on page load which shows the ionic keyboard, and it works fine on every device I've tested with except on an iPhone 4s.
HTML
<textarea focus-me></textarea>
JS
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
}),350;
}
};
});
On an iPhone 4s, when the textarea loses focus the keyboard disappears and then pops right back up. This doesn't happen on any other device.
How can I set focus to the textarea on page load (and subsequent page loads) and prevent the ionic keyboard from popping back up when the textarea loses focus?
There is an error in your code calling the $timeout directive. It should be:
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
}, 350); // correct this
}
};
});
I made a simple page with some divs being sortable by the jQuery UI Sortable, with a little help from Touch Punch to get it working on an iPad running iOS 7.1.2.
Inside each of these divs, I included a text input tag. On desktop browsers the inputs work fine, but the iPad doesn't recognize the click on the input component. The keyboard isn't launched and I can't type into it. Any lights?
My page is here: https://www.dropbox.com/s/5crp55r9jw98var/sortableTest.zip?dl=0
Well, here's what worked for me.
I edited the jquery.js. On jQuery.Event.prototype, inside the preventDefault function, there is:
if ( e.preventDefault ) {
e.preventDefault();
} else {
e.returnValue = false;
}
Basically, I changed the if condition to e.preventDefault && e.target.tagName != "INPUT". It solved the example, but in the real life I needed to add some more conditions to ensure that other input fields won't get caught by this.
Change in jquery.ui.touch-punch.js worked for me.
JS: jquery.ui.touch-punch.js
Method to modify:
//line: 31
function simulateMouseEvent(event, simulatedType) {
//...
}
//changes to add ++
if ($(event.target).is("input") || $(event.target).is("textarea")) {
return;
} else {
event.preventDefault();
}
I know this is an old question but got the following to work for me without modifying the JS files:
let detectTap = false;
$('body').on('touchstart', '#sortableMenu input', () => {
detectTap = true;
});
$('body').on('touchmove', '#sortableMenu input', () => {
detectTap = false;
});
$('body').on('touchend', '#sortableMenu input', (e) => {
if (detectTap) $(e.target).focus();
});
Basically just adding a tap listener on the inputs, and when it gets the tap, focus on that input.
I am currently workking with Jquery 1.4.2 on a mobile app. I have a list of questions.As soon as a user taps on item, a popup with its response is diplayed. each response is a checkbox radio. Responses are inside a fieldset with data-role=control group.
If a user has already respond to the question, i want to activate the checkbox radio, else just nothing. I wrote some code, It works well under desktop's browsers, but it does not work with mobile's browser. I do not know why. Actually, during few milliseconds, the activate checkbox radio is well displayed (it is checked), then that switches to an other response (so an other checkbox radio). I do not know why I get this behavior ???
My code when a listitem is clicked/tapped. It allows to load dynamically question's response in a popup.
var fieldset = $("#contentResponse");
fieldset.empty();
var radioSurvey="";
for(var i = 0; i < response.length; i++){
var label="";
if(status == 'active'){
if(userHasAlreadyAnswered != "null" && userHasAlreadyAnswered == response[i].RESPONSE_ID){
console.log("checked ...");
radiochecked = "#"+response[i].RESPONSE_ID;
label = '<label>' + '<input type="radio" checked="checked" name="radioSurvey" value="'+question_id+'_'+response[i].RESPONSE_ID+'_'+survey_id+'" id="'+response[i].RESPONSE_ID+'"/>' + response[i].RESPONSE_TEXT+'</label>';
}else{
console.log("no checked ...");
label = '<label>' + '<input type="radio" name="radioSurvey" value="'+question_id+'_'+response[i].RESPONSE_ID+'_'+survey_id+'" id="'+response[i].RESPONSE_ID+'"/>' + response[i].RESPONSE_TEXT+'</label>';
}
}
radioSurvey += label;
}
fieldset.html(radioSurvey);
fieldset.trigger("create");
if(status == 'completed' || status == 'published'){
$('#sendSurveyButton').hide();
}else{
$('#sendSurveyButton').show();
}
$("#popupSurveyList").popup("open");
EDIT : I saw an overriding from JQM thanks to google developer console.Apparently, JQM append automatically some classes (it is not my code) for label tag, especially the class ui-radio-on !! finally, it is not the first but a random checkbox radio which is checked !
How to resolve this ?
Is there any way to handle back button (device backbutton) as default functionality to move back page? I need to implement the same functionality on back button goes to previous page. If there is no previous page (first page) it exit the application. Is this possible in PhoneGap?
I also need to pop page before going to push another page is this posible in jQuery?
Checking window.location.length would be the easiest way to determine if you're on the first page, but this isn't available in Phonegap.
But since you're using JQM, you can either use the navigate event as Omar suggests or could manually count the number of pages shown and the number of pages gone back (same thing) and use this to determine if the first page is being shown and whether to exit the app. Something like this would work:
var pageHistoryCount = 0;
var goingBack = false;
$(document).bind("pageshow", function(e, data) {
if (goingBack) {
goingBack = false;
} else {
pageHistoryCount++;
console.log("Showing page #"+pageHistoryCount);
}
});
function exitApp() {
console.log("Exiting app");
navigator.app.exitApp();
}
function onPressBack(e) {
e.preventDefault();
if(pageHistoryCount > 0) pageHistoryCount--;
if (pageHistoryCount == 0) {
navigator.notification.confirm("Are you sure you want to quit?", function(result){
if(result == 2){
exitApp();
}else{
pageHistoryCount++;
}
}, 'Quit My App', 'Cancel,Ok');
} else {
goingBack = true;
console.log("Going back to page #"+pageHistoryCount);
window.history.back();
}
}
function deviceready() {
$(document).bind('backbutton', onPressBack);
}
$(document).bind('deviceready', deviceready);
As for the second part of your question:
Secondly i need to pop page before going to push another page is this
posible in jquery ?
It's not clear what you're asking here. Do you mean you want to show some kind of popup content like a dialog between every page change? Please clarify then I can help you :-)