I am confused with the selection & highlight with UI5 controls on mobile touch devices, such as IPad. As far as I know, sap.m.Text is supported to be highlighted, but for other controls like "sap.ui.core.HTML", it is not.But I just cannot highlight or select them in iPad or Win8 touch devices.
Just to make it clear, what I mean is when you "long press", in other words, "tap hold", the selection frame of Safari, e.g.,will not come out. Is there anything missing ?
Is there anyway to achieve this?
For controls that don't support the taphold event you can extend them.
You could use jQuery's taphold event.
So, a pattern like this:
onBeforeRendering: function() {
this.$().off("taphold");
},
onAfterRendering: function() {
this.$().on("taphold", function(e) {
// custom behavior
});
}
Related
I want to create a button-like component with ripple animation and it looks like this:
<div>Button</div>
<material-ripple></material-ripple>
In the past, this works fine because when I click on this custom element, I actually clicks on material-ripple and the click event bubbles to the host element.
As of angular_components 0.5.1, material-ripple shows a centered ripple on keypress. This is different from clicking because the event target is the host element itself and not the ripple component.
Is there a way that I can pass a keypress event down to the material-ripple, so that the ripple animation would be played? Or is there a way to play the animation programmatically?
After some research, I've come up with a solution using dart:html.
#ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;
#HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
(materialRipple.nativeElement as HtmlElement).dispatchEvent(
new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
.wrapped);
}
Although this does not work in Dartium due to some bugs around KeyEvent and KeyboardEvent, it works fine in Chrome.
I have a website that is optimized to work on iOS devices. But the problem is that the keyboard always says Go as user fills the form. How do I get the keyboard to say Next until the last entry on the form, where it should say Go? Or alternatively, how do I disable the Enter button entirely?
Again, this is a website. It works everywhere websites work: in browsers. Except I have having this particular problem in Safari on mobile devices.
while changing the input type gives you some control of the keyboard layout the return key label in IOS cannot be customized.
Other than changing it to say Search there are no customizations available. You can disable the functionality of the button using something like this injQuery:
$("#myForm input").live("keyup", function(evt) {
if (evt.keyCode === 13) {
$("#myForm").trigger("submit");
}
});
I'm using JQuery Mobile within a PhoneGap IOS App. I'm currently successfully capturing the IOS Keyboard return within a search key as follows.
JS
function blah()
{
if(window.event.keyCode == 13 )
{ do something }
}
HTML
<input type="search" id="searchBox" value="" onblur="dothis()" data-inline="true" onKeyPress="blah();" />
I would like to capture the 'Done' key on the keyboard as well. I cant seem to find any information on this.
Thanks.
Unfortunately, pressing the "Done" key does not fire a keyCode event. So, I can't seem to find a way to detect it either.
I think the only option is to detect the "blur" event on your field. If the event occurs, then fire whatever action you need. Of course, this is only useful if you have a single field. If you have more than one field, using "blur" to be the equivalent of "Go" or "Submit" is useless.
Let us know if you found a better workaround.
I've suggested using the blur event in my original answer. However, I think a better idea is simply to listen for the keyboard hiding - which will happen after the "Done" button is pressed.
window.addEventListener('keyboardDidHide', function () {
// Describe your logic which will be run each time keyboard is closed.
});
https://github.com/cjpearson/cordova-plugin-keyboard#keyboarddidhide
Also, be sure the deregister this listener after you've done whatever you need to do after the keyboard hides. Otherwise, it will fire every time the keyboard hides in other parts of your app.
I am creating an iPad app in which I have a textInput component that when it is in focus is suppose to call a callout with a spinner in it. The problem is that the softkeyboard is showing up every time I touch the textInput component. I have tried everything I could find which includes the following:
private function onActivating(event:SoftKeyboardEvent):void
{
event.preventDefault();
}
<s:TextInput softKeyboardActivating="onActivating(event)" />
and
<s:TextInput needsSoftKeyboard = "False"/>
Both of these examples are still having the softkeyboard show up.
Have you tried to simply disable the TextInput and change the styles so it doesn't look disabled? Touch events may not trigger though but short of styling a label [as suggested above] you'll have to do some trickery one way or another.
I'm interested in a CSS approach to disabling scrolling on the iPad. I'm using an input type of range to create a slider, but would like to prevent scrolling on the rest of the iPad to keep a fixed position of the body.
Does anyone have a foolproof method?
I'm an idiot...but nobody else answered this either. HERE IS THE ANSWER:
create a slider with the input type="range" and give it an id
add the following code to the page:
document.addEventListener('touchmove', function (e) {if(e.target.id != 'slider_id'){e.preventDefault(); }}, false);