I need to know is there any function in sencha touch to know if the keyboard hides. I want to call a function when a keyboard hides.
Any Idea...
Pls check the below link. Hope this helps....
iPad Safari - Make keyboard disappear
To prevent showing the keyboard on:
<input type="text" name="someInput" />
for when you want to do something like use a jQuery UI datepicker...
add a readonly attribute like so:
<input type="text" name="someInput" readonly="readonly" />
If you are trying to be mindful of people with JS turned off, you could always leave off the attribute and add it in your code:
$('[name=someInput]').attr('readonly','readonly');
Related
On a site I'm working on, I have a custom search field that the user wants in different places depending on the device. It's a WordPress site and the search is starting off in the header menu. On mobile, it's being moved above the title area/hamburger menu. They also have specifications that the field itself should be hidden until a button is clicked, at which point the field is displayed.
On desktop, before the search form is moved around the DOM, everything is working fine. But on mobile devices, and after the input field itself has been displayed, the blur event is firing about 200ms after the focus event.
After reading this answer: Input field immediately blurs after focus, my guess is that moving the search element around the DOM is causing the issue, but I can't figure out how to fix that without just creating two identical search fields and hiding one depending on screen width. The question/answer I linked doesn't quite fit my scenario the same way, so it didn't really help me get to a solution.
Here's my actual form:
<form role="search" method="get" class="search-form" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="search-form-inner">
<input type="search" value="" name="s" id="s" class="search-form-field" placeholder="Search keolisamericas.com">
<input type="submit" id="searchsubmit" class="search-form-submit search-form-toggle" value="">
<span class="search-form-close search-form-toggle"><span class="dashicons dashicons-no-alt"></span></span>
</div>
</form>
And here's the code that's moving the form:
if (document.documentElement.clientWidth <= 900) {
var $search = $(".genesis-nav-menu .menu-item.search");
$search.detach();
$(".mobile-top-header-nav").prepend($search);
}
Edit: For now, I'm just going with a temporary solution of having two identical forms on the page, and hiding/unhiding them with CSS depending on the screen size. I'd love a more elegant solution than that, and to figure out what's causing my issue to begin with.
I am able to use $('#text-box').focus(); to successfully focus the cursor on the text-box after a page loads. However, when I load the page on a mobile browser the text-box focuses but the keyboard doesn't popup. I tried using click(); but that doesn't seem to work either.
Any idea how could I make the keyboard popup after text-box focus? or maybe you know how to achieve this with a different approach? This is my code:
$(document).ready(function () {
selectTextBox();
});
function selectTextBox() {
$('#tbFirstName_TextBox').focus();
}
<div>
<span id="tbFN">
<input type="text" id="tbFirstName_TextBox" placeholder="First Name">
</span>
</div>
OK, I know how to detect keyboard input. I know how to focus on keyboard input.
But I want to know what the best practice is for detecting keyboard input => focusing to textarea or textfield => AND enter that key into the field.
Here's how it would work: I'm on a page. I type A. Then my textfield gets focused and A is typed into the field. This sounds trivial but actually I haven't found a simple way to do this. The reason is because the initial keyboard input event is not directed towards the textfield, and I need to propagate that event to the newly focused text field.
Is there a conventional approach to doing something like this?
Sample html:
<form>
<input type="text" />
<input type="text" id="thisguy" />
<input type="text" />
<input type="text" />
</form>
jQuery for above html
$(document).live('keypress', function (e) {
$('#thisguy').val($('#thisguy').val() + String.fromCharCode(e.which));
});
Needs to be cleaned up. Maybe set focus instead of changing the text value.
I am building a mobile site for a Motorola / IE 6 device.
For some reason that I can not come up with, jQuery's .select() function is working, but directly calling it in javascript is not.
<input type="text" id="lid" value="" class="as_done">
The jQuery way that works is this:
$('#lid').select();
The way that isn't working is this:
document.getElementById('lid').select();
This has me all sorts of confused. Any ideas as to why this is?
EDIT: I am not trying to do anything in jQuery. I am just trying to select the text inside the input box. I shouldn't need jQuery to do this, but the standard way is not working. http://www.w3schools.com/jsref/met_text_select.asp
Interesting change made it work for me. Perhaps this is a bug in windows mobile IE 6?
Consider the following html:
<input type="hidden" id="lid_as" name="lid" value="1">
<input type="text" id="lid" value="" class="as_done">
Calling alert("document.getElementById('lid').name"); resulted in the message lid. This makes me think that it is grabbing the first input box whose ID is actually lid_as.
When I moved the lid_as input below the lid box, the select function works properly.
So this HTML made it work:
<input type="text" id="lid" value="" class="as_done">
<input type="hidden" id="lid_as" name="lid" value="1">
Again, this question is in relation to WINDOWS MOBILE IE 6.
$() function returns a jquery object whereas document.getElementById returns a simple DOM object.
maybe it happens due to the fact you did not call .focus() in advance
document.getElementById('lid').focus();
document.getElementById('lid').select();
this is wrapped in jQuerys .select()
I have a site where i use readonly inputs. On the desktop I use js to select the input field on the first click.
<input readonly="readonly" type="text" class="select" value="Value to select">
$('.select').click(function(){
$(this).select();
});
But in Safari for iOS I can't the select the input text at all (long tap on the text).
Is there a way to make the text selectable?
have you tried something like this? Sometimes focus solves the problem, also perhaps the browser isn't aware that select() should trigger the event?:
$(this).focus().trigger('select');