xtermjs top page has demo section. I can select with mouse click so that I can copy the selection. However, on iPad, I can't select with touch. Is there any way to select on xtermjs for the touch devices, like iPad?
I added touchstart event and could get pageY but I'm not sure how to convert coordinates to cols and rows.. As long as cols and rows there, I think we can use xterm api to select but I can't find a way..
document.addEventListener('touchstart', function(event){
alert(event.touches[0].pageY)
})
I found solution by myself.. I mapped touch events to mouse events and works well.
JavaScript mapping touch events to mouse events
Related
How can I disable scrolling by touch on xterm.js?
I have a touchmove event on term.element that simulates cursor keys by swiping the appropriate direction. This works great in applications such as Midnight Commander that use the "alternate screen buffer", but in the default screen buffer that has scrollback (i.e. lynx or bash, for example), it scrolls the terminal (as it normally would) in addition to sending the ansi codes for the arrow keys.
I need to override this behaviour so scrolling does not happen when you swipe, without preventing scrolling by other means such as the mouse-wheel or the scrollbar, or interfering with other mouse events (and possibly touch events).
Tried preventDefault() on the event, even tried attaching it to various elements within the terminal, parentNode, and its parentNode. Same behaviour. Also tried position: absolute with bottom: 0px, but the way xterm.js simulates a terminal makes for abberant results.
Any ideas?
Ok. The solution is: add event.stopPropagation() at the top of the handler for the touchmove event. Attach it to the terminal element (i.e. term.element). Forget the overlay, pointer-events: none, etc. Works perfect. No additional garbage. I left in event.preventDefault() for another reason, but I think just the stopPropagation stands alone for this particular question.
I would like to add, if you just want to disable touch scrolling on the terminal all you need is:
term.addEventListener('touchmove',function(e){e.stopPropagation()});
Assuming your terminal object's name is 'term'.
I have a questionnaire with buttons that show a tooltip on mouse hover and select on mouse click.
On mobile devices, ToolTip captures the first click to show the tool tip (equivalent of "hover" on computer) and the second click is used for button selection (equivalent of "click" on computer).
Now my question: how, on a mobile device, can I use the first click to both show the tooltip AND select the button ?
Is there a way I can e.g. propagate the event to make it act like on a computer ?
Or intercept the first event and trigger another event ?
Or should I act at the level of the button by catching the event and manually trigger tooltip showing ? (in which case I'll also need to figure out how to hide the tooltip when a button from another question is clicked).
Or perhaps JQuery-UI ToolTip is not adapted to my needs?
Thanks ahead for your views
LA
Finally I found an acceptable solution by manually hooking a click event to the buttons as follows:
$(".questionnaire_button").click(function () {
$(this).tooltip({
position: { my: "left+15 center", at: "center+20 center" }
});
$(this).tooltip("open");
})
i prevented from scrolling my cross platform app adding
document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);
on device ready function.
Everything works good except for input fields: when i tap on input fields and drag the page down, i can move the entire window down and see a black screen.
Any idea on how to prevent scrolling when gesture start from inside an input field?
Setting UIWebViewBounce to NO should fix this.
Your project > Resources > Cordova.plist > set:
UIWebViewBounce Boolean NO
I have a <div> with some text and I would like the user to be able to natively select the text. The issue is that when I attach any mouse event handler to the element or it's parent (besides document element) the selection won't work any longer.
This could be observe on the site linked below. If you sink mouse events the selection won't work for the first line.
http://rafalrybacki.com/lab/selection_ios/
What happens after clicking "sink mouse events" is:
main.sinkEvents(Event.MOUSEEVENTS);
Checked with iOS5.
I would like make the text selecting work (keeping the mouse events). How to do this?
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html