There are multiple questions with answers related to my problem but unfortunately, none worked for me.
I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.
I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.
Here is what I am using.
HTML:
<mat-form-field class="ib-input-container-width">
<input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')" [formControl]="form.get('FirstName')" type="text" >
</mat-form-field>
<mat-form-field class="ib-input-container-width" >
<input #lastName id="lastName" matInput [formControl]="form.get('LastName')" type="text">
TS:
handleNext(elementId){
let nextElement = document.getElementById(elementId);
console.log(nextElement);
nextElement.focus();
}
onChange(event){
console.log(event.keycode);
}
PS: I am on a working progressive web app using Cordova.
Update
I have tried solution from https://stackoverflow.com/a/28103608/3081929
But ng-change doesn't work either.
the code looks correct,
before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder
Related
I am using angular with ionic
I have used below code
<input type="number" name="foo" ng-model="field.field_value" class="form-number" ng-focus="keyboardFocus(this)" >
$scope.keyboardFocus=function(t){
var a= $(t).attr('class');
alert(a);
// $ionicScrollDelegate.scrollBottom();
// $ionicScrollDelegate.$getByHandle(t).scrollTop();
$("."+a).css('position','absolute');
$("."+a).css('top','0px');
}
But scroll is not working in current position on textbox. keyboard focus on textbox is not working but type any text foucus is working
Imho, no need to use $ionicScrollDelegate, change position, scroll manually or any other complicated stuff.
You just need the Ionic Keyboard Cordova plugin to be installed. See the explanation here.
To install it:
cordova plugin add com.ionic.keyboard
Nothing else to do. On focus, the page will move automatically.
Of course, it will work only on real devices, but in my experience, with this plugin, focused form elements are never hidden under the keyboard.
Best way will be to use $ionicScrollDelegate, for that you need to define delegate-handle value on element this way:
<input type="number" name="foo" ng-model="field.field_value" class="form-number" delegate-handle="myInput" ng-focus="keyboardFocus('myInput')" >
And then pass into keyboardFocus this way: ng-focus="keyboardFocus('myInput')" .
And function will become
$scope.keyboardFocus=function(handleValue){
$ionicScrollDelegate.$getByHandle(handleValue).scrollTop();
}
I was working through the Ionic tutorial for using the Cordova Camera API.
http://learn.ionicframework.com/formulas/cordova-camera/
Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.
I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?
My config:
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
...
The function in my controller:
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.cameraPic = imageURI;
}, function(err) {
$scope.cameraPic = "error";
console.err(err);
});
};
My view:
<ion-view>
<ion-content>
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="getPhoto()">
Take Photo
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
{{cameraPic}}
</ion-content>
</ion-view>
This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?
EDIT
Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.
Definitely looking like a local file access issue.
As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:
NOTE: The camera API only works on a real device, and not in the
emulator.
Source: http://ngcordova.com/docs/plugins/camera/
This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.
I am using ionic and cordova to build a hybrid application.
However, I can't copy text from any of my webviews. From my Android phone or from the browser, copying text does not work. Selecting text and dragging the pointer does nothing.
This occurs for instance with the basic app generated by ionic start myApp tabs.
Simply put, how can I allow users to copy-paste?
Make ion-content to overflow-scroll="true" and add a class to your copyable text
.selectable{
-webkit-user-select: auto;
}
You cannot copy anything to clipboard from javascript for now programmatically. However it can be done from native side via plugin CordovaClipboard
.selectext
{
-webkit-user-select: auto;
}
<div class="selectext">
Select text
</div>
You can try with console.log() and copy/paste from the console.
Or if you need to copy from an emulator you can use Remote debugging
The Issue:
Using
<input id="my_tel" type="tel" onkeypress="alert(event);"/>
<input id="my_num" type="number" onkeypress="alert(event);" />
The issue is that pressing done or enter or go key in android, nothing happens.For all other keys it works fine. When i tried to alert what event is being fired i found none.
The keypad does not hide (which is very sad) on pressing go/enter/done button.
However using
input type="text"
the issue does not exist.
Here is what i tried :
A. Used input type="text" and do not allow user to enter anything except
numbers.
Problem with this approach : The user is always presented with the default textual keyboard, and she/he has to switch, from default text to number pad,
which is not elegant and a turn off as i have many such pages in my project.
B. Used events like 'touchstart'and 'touchend' but no luck.
C. The input box is not even losing focus on key press so the solution
html phonegap android : numeric soft keyboard has next instead of go button is not useful.
Possible solution :
We can use the SoftKeyBoard plugin (https://github.com/phonegap/phonegap-plugins/tree/master/Android/SoftKeyboard). And hope that this problem is solved by this. But seriously can't there be a better solution??
Note : The problem is not observed in the iOS app,just android.
Another Note : No DOM event is fired even on pressing backspace key, but atleast the the backspace key is doing its job. In my case the done/go/enter key does not seem to execute its default behavior.
are you using iScroll?, if you are try removing it for a quick test and see what happens. I use it on a phonegap app and it's doing strange things with the inputs.
Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>