i have an issue while developing phone gap application on iOS 7 using cordova 2.7 with html input text. when i select input text the keyboard pops up. but can't type anything as the focus is lost. i have to select again to enter text.
can anyone help me on this.
I ran into a similar issue where the keyboard would come up, but nothing typed shows up in the textbox. Mine was caused by css -
* {
-webkit-user-select: none; /* prevent copy paste */
}
I fixed the issue by overriding the style for textboxes -
input[type="text"] {
-webkit-user-select: text;
}
There is a config file inside cordova apps, config.xml where by default cordova does not allow you to control focus from javascript calls, this means that the keyboard can "disappear"
Change this:
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
to
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
and then just write an event handler for the field where it sets focus on itself when tapped inside a setTimeout. This worked really well for me recently.
This is a known issue which has already been logged with Cordova here: https://issues.apache.org/jira/browse/CB-5115. I would also like a workaround to this as it's not ideal.
Here is the workaround as explained there,
window.document.body.ontouchstart = (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
e.preventDefault();
e.target.focus();
}
};
I ran into this issue and found out I had fixed it in another Phonegap project using this. It's basically same as #mld answer, but using html. Using * doesn't work for my app on iOS.
html {
-webkit-user-select: none; /* prevent text selection */
}
input[type="text"] {
-webkit-user-select: text;
}
I had this issue in an Ionic V1 / Angular 1.5 project. This fix worked for me:
window.addEventListener('native.keyboardshow', function () {
if ( document.activeElement != document.getElementById('my-input') && document.activeElement.nodeName != 'INPUT' ){
document.getElementById('my-input').focus()
}
});
When we tap the input, the keyboard comes up. We can then check if our input element is actually focused. If not, we manually focus it. If it's another input, we won't focus it.
I called this inside my component's $onInit function - make sure to remove the event listener when your component is destroyed with $onDestroy. This also assumes you're using the ionic-plugin-keyboard plugin.
This works well with one input, but if you have multiple inputs on the same page, you will probably need additional logic to prevent your app from focusing on the wrong input when the keyboard opens.
Related
I am working on an app in which users can upload images to their profile.
The following function is invoked when an event is fired from a child element. It dynamically creates an input element so the user can select a file to upload.
_changeImage: function () {
var input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.addEventListener('change', this._imgChanged.bind(this));
input.click();
},
It works on browser and android platforms but fails on iOS.
Could anyone point out what might be causing this problem and how I could approach it?
This problem appears to be related to a security measure in iOS. File input must be manually clicked by the user, not done programatically.
In order to work around this we overlay an invisible input element over the target element.
<input id="inputpic" type="file" accept="image/*" on-change="someFunction">
*keep in mind that on-change is polymer specific so you may want to use onChange
Then we style it with css to have 0 opacity.
#inputpic {
opacity: 0;
position: absolute;
top: [position_of_target_element];
left: [position_of_target_element];
width: [width_of_target_element]px;
height: [width_of_target_element]px;
z-index: 10;
}
I am not particularly happy about this workaround but I tried several other proposed solutions (link below) and found that:
Using a 'hidden' attribute instead of css opacity does not work.
Wrapping the input element in a label element does not work.
More info in this thread.
If anyone else has a better solution I would love to hear back. Thanks!
In my project,jquery-ui-1.10.3.custom.min.js is used to create UIdatePicker. In HTML page , UIDatePicker is defined as below :
<input id='input_birthdate' class='inputText input big,ui-datepicker-title-custom' type="text" maxlength="64" tabindex="7" style ="position: relative; z-index: 1000;" />
If I inspect this particuler field in HTML page in Firefox browser , I can see the IDs and Classes declared in jquery-ui-1.10.3.custom.min.js are being used.(I don't know how jquery-ui-1.10.3.custom.min.js is used on input_birthdate).
If I am declaring as below in some JavaScript page , it works both in laptop browser and ipad but Its not allowing to select any year or month as div is getting closed.
$("#input_birthdate").focusout(function() {
$("#input_birthdate").datepicker("hide");
});
I noticed that datepicker is made of several components,so I thought of applying focusout on parent div as below:
$('#ui-datepicker-div').focusout(function(){
$('#ui-datepicker-div').datepicker("hide");
});
But now its not working on IPAD.
Kindly suggest where I am going wrong or any other alternative to fix this.
Please check the following function should work on iPad
$("#input_birthdate").blur(function()
{
$("#input_birthdate").datepicker("hide");
});
I'm looking for a way to prevent select2's search-input being automatically focussed when the select2-dropdown is opened. I know this is select2's intended default behavior - and while this is fine for desktop clients, I need to prevent this behavior for the iPad where it triggers the iPads software keyboard, which is not what we want as a default.
I've searched for an option to do so with no luck.
http://jsfiddle.net/KwW5n/2/ reflects our setup - we're using a simple -element as a base for our select2-functionality:
$('#source').select2();
This worked for me on select2 v4:
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e) {
$('.select2-search input').prop('focus',false);
});
credit goes to this github comment
Sometimes select2 "steals" focus from other elements. After messing around for quite a bit, I just used this solution below.
At the very end of the event handler for the YourSelect2.on('change', function(){
setTimeout(firstInputFocus, 300);
}
function firstInputFocus() {
$("YourSelect2").focus();
}
By setting this slight delay it works. I am able to change focus away from the dropdown. Following the "change" event for select2, it does something internal to the select2 code which prevents you from IMMEDIATELY changing focus. Inserting this slight delay did the trick for me at any rate.
Ok, I am not sure if changing the focus is possible unless you change the select2 script itself (I could be wrong about this though). As a workaround what you could do is hide the search box by setting minimumResultsForSearch property to a negative value.
<select id="test">
<option>1</option>
<option>2</option>
</select>
And then:
$(document).ready(function() {
$('#test').select2({
minimumResultsForSearch: -1
});
});
Fiddle
None of the solutions posted here worked for me so I did this work around:
This will make the search input readonly when opened (prevents keyboard on mobile), then when you click the input it removes readonly and opens keyboard.
$('#myselectbox').select2({placeholder: "Select Something"}).on('select2:open', function(e){
$('.select2-search input').attr('readonly',true);
});
$('body').on('click', '.select2-search input', function(){
$(this).attr('readonly',false);
});
The only 'solution' I found is to remove .select2-input and .select2-focusser right after creation of the dropdown. This only works fine when you don't need the input field for searching, e.g. when the list is short enough.
Removing only .select2-focusser at least prevents the keyboard from popping up when an option was selected.
If you want to disable the searchbox and also the auto focus as a text input, e.g. preventing ios browsers to scroll-in the keyboard, use this code:
$('select').select2({});
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e) {
$(".select2-search, .select2-focusser").remove();
});
Although #Choma's answer is fine, it will alter the select2 default behavior on both desktop and mobile devices.
I had to find a solution for a responsive website: prevent the auto-focus of the search input only on mobile devices, and keep the default behaviour on desktops.
In order to detect the mobile devices, I've used Modernizr library, which can test for the existence of Touch Events in the browser.
We can use Modernizr.touch on Modenizr v2, which will return true if touch events are supported, or false otherwise.
So we can modify #Choma's answer like this:
$('select').on('select2:open', function() {
if (Modernizr.touch) {
$('.select2-search__field').prop('focus', false);
}
});
Demo:
https://codepen.io/andreivictor/full/QmKxOw/
Tested on:
Desktop: IE 11, Chrome, Firefox, Opera, Safari
Android 4.2.2
Android 5.0.1 (Samsung Galaxy S4)
Android 6.0.1 (Samsung Galaxy S7 Edge)
iOS 11.2.5 (iPhone 8)
iOS 10.3.2 (iPhone 6 Plus)
iOS 10.3.2 (iPad Mini 3)
I got JQuery's "too much recursion" error in the console when using Choma's solution.
The following worked for me for v4:
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e) {
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev){
$('#modal .select2-search input').attr('readonly',false);
});
});
As you can tell this select2 field is on a modal with the id modal and the select2 field itself has an id of subject. Of course change the selector to what's appropriate for your own code.
It basically adds a readonly attribute to the input when the select2 field opens preventing a mobile keyboard from appearing, and then removes it when the search field is clicked/pressed on allowing the keyboard to appear only then.
Following trick worked for me. You can disable input search field of select2 element :
$('select').on('select2:opening', function() {
$('.select2-search__field').attr("autocomplete", "new-password");
});
setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
maybe someone need~
I've tried this and it works~
$('#selectID').on('select2:opening', function (e) {
e.preventDefault();
});
The solution worked perfectly for me. tested on mobile
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e) {
$('.select2-search input').prop('focus', 1);
});
It took me a little bit, but I figured out that I can't click on my inputs because of the touch.punch script I'm using to enable jquery UI drag functionality on touch devices. Anyone familiar with this script know why that might be? The form actually resides down the tree of the parent object. Does anyone know a way I can override or force through the selection? I'm going to try binding events that force focus to the input right now but maybe someone here has some insight?
JEditable + jQuery UI Sortable + jquery.ui.touch-punch
I have spent all day on this problem and I finally figured out the solution. The solution is very similar to kidwon's answer. However, I was using jeditable which dynamically creates input fields without class names. So I used this conditional statement instead of checking the class name:
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
I think this is a better solution as it always uses the native functionality for any input or textarea fields.
To anyone who might wind up here with a similar situation using the very handy touch.punch hack, simply forcing the focus through on a click event will work just fine!
$('.input').bind('click', function(){
$(this).focus();
});
Folks, the other two answers here did NOT work for me, but Danwilliger's solution works; however, it's not clear from his answer how exactly to set it up in the Touch Punch JS file. For future answer-seekers, here's what to do. Again, this is Danwilliger's solution -- I'm just clarifying.
Change this section in jquery.ui.touch-punch.js (on approximately line 30):
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
To this:
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
} else {
event.preventDefault();
}
Best of luck!
OK here's another solution if your textfield whatever HTML element is ain't focusing,scrolling, selecting words, moving text cursor around the text and whatever different scenarios might come then you may override the jquery.ui.touch.punch.js script.
I assume that your element isn't the draggable one but probably a child of it as my case was.
Put a class on your html element, for example class="useDefault".
Then go to the script file and find that part:
...
function simulateMouseEvent (event, simulatedType) {
// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
....
As you can probably see event.preventDefault(); assures that jquery.ui.touch.punch.js
overrides the default behaviors of the browser. To prevent that for our particular class node, make the following modifications:
if (event.originalEvent.touches.length > 1) {
return;
}
var touch = event.originalEvent.changedTouches[0],
simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
event.stopPropagation();
} else {
event.preventDefault();
}
This solution is tested with webkit browsers only and jQuery UI Touch Punch 0.2.2 release.
Hope that quick solution helps, BR
Thanks to #Danwilliger and #jeremytripp for the solution. Being that this issue has been known for years and yet has still not been worked into touch-punch author's Git repo, I forked it with the solution added here:
https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js
I would be quite happy for the author to incorporate those few lines of a change into the original library and make this one unneeded then, but if that never happens, it's nice to have a single source file to reference.
Jacob's answer worked with a slight modification—I found that using the click event resulted in inconsistent behavior on iPad, ios9 Safari. Sometimes I'd press once on a field and it would focus, other times I had to press three times. Changing click to touchstart solved the problem for me (I also used event delegation since my form was added dynamically):
$('form').on('touchstart', 'input,textarea',function(){
$(this).focus();
});
One solution is to use a handle.
Add an icon inside and use this to drag. Then the inputs work fine.
<li><span class="move">Move</span><input...../></li>
$("#sortableList").sortable({
handle: ".move"
});
I actually tried adding the lines which Danwilliger mentioned, it did not do the trick for me.
What worked for me was
//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
event.stopPropagation();
$(touch.target).focus();
} else {
event.preventDefault();
}
I am not really sure why the other answers posted did not work, but for anyone else out there if they have the same issue try my solution out :).
Throttlehead's solution worked for me. Simpler perhaps to just use the JQuery selectors to cover all inputs and textareas:
$('input,textarea').bind('click', function(){
$(this).focus();
});
I'm building an app to launch across Android, iOS, and desktop simultaneously. The app includes a login that is attached to a vBulletin system and I've run into a significant issue (that the client is adamant must be fixed). On iOS, if you are typing in a TextInput that has its displayAsPassword set to true, it will show plain text while typing. Once you click out of the TextInput, it displays properly.
Here is the code I am using within Flex
<s:TextInput id="inputField" width="100%" styleName="loginFields" text="Password" focusAlpha="0" focusEnabled="false" autoCorrect="false" />
I then attach focus events to the input field that run these functions.
private var defaultText:String = 'Password';
private var passwordDisplay:Boolean = true;
private function focusIn (e:FocusEvent = null):void {
if (this.inputField.text == this.defaultText){
this.inputField.text = '';
}
if (this.passwordDisplay){
this.inputField.displayAsPassword = true;
}
}
private function focusOut (e:FocusEvent = null):void {
if (this.inputField.text == ''){
this.inputField.text = this.defaultText;
if (this.passwordDisplay){
this.inputField.displayAsPassword = false;
}
}
}
There's a lot more code in the file, but this is the only relevant. Basically, on focus in, it checks if the text == the default text. If it does, it empties the field. It then sets displayAsPassword to true. On focus out, it checks if the field is empty. If it is, it resets the field to default and displayAsPassword to false. I know the default text is built in, but I needed more functionality than it offered.
Now, this issue (password displaying as plaintext while focus is on field) is present in iOS only and it doesn't occur in the emulator. It works perfectly and as expected on Android and desktop. I've tried recreating the functionality manually (possible but not ideal because caretIndex is not a TextInput property), I've tried hiding the TextInput and overlaying a field of '•' that match the length of the input (not possible because TextInput is StageText). I'm not sure what else I can try here. Any ideas?
Thanks in advance for any help here.
Specs:
Built and compiled using FlashBuilder 4.6 (but I also have 4.5.1 available to me)
Using Air 3.1
Compiled on OS X Lion
Tested on both 1st and 3rd gen iPads
Using Flex SDK 4.6.0