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();
}
Related
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
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.
I have the following input field
<input type="number" id="zip-code" placeholder="Zip code" />
Placeholder is shown in normal browsers except android 4.0 and above and the width also get reduced compared to other fields.
What could be the error?
It's a known bug in the default Android Webkit browser. As per this QuirksMode page, you can see that many versions of Android suffer from this. Chrome for Android on the other hand, doesn't.
I've created a simple JavaScript shim (fix) for this. First, read this question How to display placeholder's text in HTML5's number-typed input, then if you still want to use a placeholder like that, checkout my solution gist.
TL;DR;
Leave your markup as you would expect;
<input type="number" placeholder="Enter some numbers" />
Then run either of these scripts after the page has loaded;
// jQuery version
$("input[type='number']").each(function(i, el) {
el.type = "text";
el.onfocus = function(){this.type="number";};
el.onblur = function(){this.type="text";};
});
// Stand-alone version
(function(){ var elms = document.querySelectorAll("input"), i=elms.length;
while(i--) {
var el=elms[i]; if(el.type=="number"])
el.type="text",
el.onfocus = function(){this.type="number";},
el.onblur = function(){this.type="text";};
}
})();
By using type = "tel' instead of type = "number" the placeholder is displayed and the numeric keyboard is opened on focus.
I had the same problem and my solution was setting the 'type' field as text. I think it happens because of the type property. Your placeholder text is not a number! If you have to force user to use only number format, you may use javascript plugins for this and i did it like that :)
try this:
<input type="text" pattern="[0-9]" id="zip-code" placeholder="Zip code">
I've seen/heard all about disabling text selection with the variations of user-select, but none of those are working for the problem I'm having. On Android (and I presume on iPhone), if you tap-and-hold on text, it highlights it and brings up little flags to drag and select text. I need to disable those (see image):
I've tried -webkit-touch-callout to no avail, and even tried things like $('body').on('select',function(e){e.preventDefault();return;}); to no avail. And the cheap tricks like ::selection:rgba(0,0,0,0); won't work either, as hiding these won't help - selection still happens and it disrupts the UI. Plus I'm guessing those flags would still be there.
Any thoughts would be great. Thanks!
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
This will disable it for every browser going.
Reference:
jsFiddle Demo with Plugin
The above jsFiddle Demo I made uses a Plugin to allow you to prevent any block of text from being selected in Android or iOS devices (along with desktop browsers too).
It's easy to use and here is the sample markup once the jQuery plugin is installed.
Sample HTML:
<p class="notSelectable">This text is not selectable</p>
<p> This text is selectable</p>
Sample jQuery:
$(document).ready(function(){
$('.notSelectable').disableSelection();
});
Plugin code:
$.fn.extend({
disableSelection: function() {
this.each(function() {
this.onselectstart = function() {
return false;
};
this.unselectable = "on";
$(this).css('-moz-user-select', 'none');
$(this).css('-webkit-user-select', 'none');
});
return this;
}
});
Per your message comment: I still need to be able to trigger events (notably, touchstart, touchmove, and touchend) on the elements.
I would simply would use a wrapper that is not affected by this plugin, yet it's text-contents are protected using this plugin.
To allow interaction with a link in a block of text, you can use span tags for all but the link and add class name .notSelected for those span tags only, thus preserving selection and interaction of the anchors link.
Status Update: This updated jsFiddle confirms you concern that perhaps other functions may not work when text-selection is disabled. Shown in this updated jsFiddle is jQuery Click Event listener that will fire a Browser Alert for when the Bold Text is clicked on, even if that Bold Text is not text-selectable.
-webkit-user-select:none; wasn't supported on Android until 4.1 (sorry).
I've got a search bar in a jQM/phonegap/cordova Android app.
How on earth do I detect when the user presses 'enter' or 'done' or whatever, so I can submit the search??
Do I have to build a custom key detector, or is there an event for this?
So frustrating - I can't find this in the docs anywhere....
Cheers all!
You would wrap the field in a form element ie:
<form id="foo">
<input type="text" />
</form>
Then to trigger an event when "the user presses the equivalent of 'return' on a PC keyboard i.e. 'go' or 'done', or whatever the OS has called it" you can use
$('#foo').submit(function(){
//do stuff
})
You would use the same code you would in a "normal" HTML application. Since you are using jQuery Mobile, you can use jQuery. If the field had an id of foo, you could use
$("#foo").on("click", function() {
//do stuff here
});