i want to select all text on a textbox while user focus on this textbox at that time its text will be selected automatically. Same as .select() javascript function works in firefox or ie. Same functionality i want on ipad safari browser.
See this answer:
// t is the input field
setTimeout(function() {
t.setSelectionRange(0, 9999);
}, 1);
Related
I have two pages .I am able to show page on clicking the button but i need to show same content as a dialog box on same screen without changing the screen. I need to show dialog box having same field in page .Here is my code in fiddle. on clicking the add button new page is open but i need the dialog box.
http://fiddle.jshell.net/ravi1989/nLJR7/
Are you looking for this?
$.mobile.changePage($("#UserSettingScreen"), {
transition: "slide",
reverse: false,
changeHash: false,
role: 'dialog' // you can use role: 'dialog' to open a dialog
});
Here is jsFiddle demo.
UPDATE
1) You can close a dialog programmatically by calling dialog('close') method like so
$("#case_dialog_cancel").on("click", function(){
$("#CaseInformationScreen").dialog('close');
});
Here is updated jsFiddle.
2) You can theme an overlay. Read more about overlayTHeme. If you for some reason want to get rid of the overlay completely or make it transparent - google for hakish ways. Here is one link Transparent jQuery mobile dialogs
I have an html input text element in my application with jQuery blur event handler:
$('#textBox').blur(function () { console.log('blur'); })
When I click on a page area out of the textbox, desktop browsers fire this event, but iPad Safari does not. And neither the keyboard nor the cursor does not disappear. Are there any ways to "enable" the blur event ?
By design, a tap away will remove the hover state but the textbox will remain focused.
Safari Web Content Guide should help you develop for Safari on IOS devices.
Workaround (albeit not recommended): https://codepen.io/kevinfarrugia/pen/rKpRBL
document.getElementById("container").addEventListener("click", () => {
document.getElementById("container").focus();
});
(Note I have not yet tested this in IE FF or Safari, I'm hoping there is some setting on the autocomplete to make this work...)
In Chrome, when I type some text into a box that triggers a jQuery UI autocomplete dropdown to appear, the dropdown disappears when I switch focus to another application (my programming app Visual Studio).
Is there a setting to make the autocomplete drop down menu "stick" and remain visible when the browser loses focus in the operating system?
When you switch to another application an onblur event will be fired by the browser which is what hides the autocomplete menu. Your best bet to accomplish this "sticky" behavior is to attach an onfocus event handler to the window and open the autocomplete menu then.
$(function() {
var autocomplete = $( 'whatever' ).autocomplete();
$( window ).on( 'focus', function() {
autocomplete.autocomplete( 'search' );
});
});
I have a live example of this here - http://jsfiddle.net/RmALY/1/show/.
Context: asp.net MVC 3 app. Page1 is a mobile page using jquery mobile and it contains a link to Page2 which is a normal page which uses a specific stylesheet.
Issue: on my phone, when I click the link on Page1, it goes to Page2 (with a horizontal sliding effect) but the stylesheet is not loaded. If I force a reload of Page2 then the stylesheet is loaded. Also, on the iphone, if I press the link to show the "open in new window" button and click it, it loads well in the new window.
Debug: if I simulate this on a desktop computer (by forcing mobile views) the same happens. The back button does not even work well. When loading Page2, Firebug, in the Net tab, displays as if I was still loading Page1 (it displays Get Page1) even if this is the text of Page2 that appears (without the css), and it doesn't show a line saying that it tries to load the css.
Update: I was using 1.0. I just tried the latest 1.1 and this is even worse. When clicking on the link, the title for Page2 appears in my firefox tab, the address bar shows the new url but Page2 is not displayed (even if Firebug shows it loads something).
To turn off AJAX page transitions:
$(document).bind("mobileinit", function () {
$.mobile.addBackBtn = false;
$.mobile.ajaxEnabled = false;
$.mobile.ajaxLinksEnabled = false;
});
EDIT
To change single links to non-ajax or vice verca you can use this code:
jQuery:
$("a").attr("data-ajax", "false");
Or you can simply do <a href="somepage" data-ajax="false" >Link</a>
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.