i'm trying to develop a simple application in dart, and i want to catch the arrow keys press
event, i tried to add a onKeyPress event:
window.on.keyPress.add(myKeyDownEvent);
void myKeyDownEvent(Event event){
query("#text").text = event.type.toString();
}
It works with all keypress except arrow keys what is wrong?
There's a issue on chrome for that with WontFix status. Comment 5 says :
This is done to match IE. keypress events are only supposed to fire for keys that insert
characters. Note that keydown/keyup do fire for arrow keys.
Using window.on.keyDown instead of window.on.keyPress works for me.
Related
Is there any specific way to add shortcut Listener for the Enter Key on a specific TextField element in Vaadin Flow. The documentation is silent about this.
I guess you are not actually looking for a ”shortcut” key but to react to enter presses when the focus is inside the field? If so, see KeyNotifier and e.g. addKeyPressListener.
It is also possible to listen to any DOM event using the element API, e.g.
textField.getElement().addEventListener("keyup", e -> {
System.out.println("Value is now: " +
e.getEventData().getString("element.value"));
}).addEventData("element.value").setFilter("event.keyCode == 13");
In the Vaadin Directory there is a UI Web Component for Vaadin 10. It's called shortcut. The usage is very simple:
Shortcut.add(messageField, Key.ENTER, sendButton::click);
You also can also add modifier keys like that:
Shortcut.add(messageField, Key.ENTER, sendButton::click, Key.SHIFT);
I am trying to de-select previosly selected text (select nothing) after having selected and copied it with Keypress events:
EVENT TYPE=KEYPRESS CHAR="a" MODIFIERS="ctrl"
EVENT TYPE=KEYPRESS CHAR="c" MODIFIERS="ctrl"
I have already tried using the CLICK and DBLCLICK events on random elements of the page, also using alternative mouse buttons (1,2) e.g.:
EVENT TYPE=CLICK SELECTOR="HTML>BODY>TABLE>TBODY>TR>TD>TABLE:nth-of-type(4)>TBODY>TR>TD:nth-of-type(3)>TABLE>TBODY>TR:nth-of-type(4)>TD>TABLE:nth-of-type(2)>TBODY>TR:nth-of-type(5)>TD>TABLE>TBODY>TR>TD:nth-of-type(2)" BUTTON=0
and also using XPATH instead:
EVENT TYPE=CLICK XPATH="/html/body/table/tbody/tr/td[1]/table[4]/tbody/tr[1]/td[3]/table/tbody/tr[4]/td/table[2]/tbody/tr[1]/td/table/tbody/tr/td[1]/strong" BUTTON=0
In both cases the targeted elements are marked but nothing else happens.
The target is a simple html document structured by tables containing mostly text.
I also tried to use CLICK with point coordinates:
CLICK X=784 Y=166
And, as suggested in other questions, to use a short delay before the event:
WAIT SECONDS=1
Please note, that the first event (EVENT TYPE=KEYPRESS CHAR="a" MODIFIERS="ctrl") works flawlessly.
Edit: The version of iMacros for Firefox I was using, was 9.03, the accepted solution works only up to 8.97.
If there are no input elements on the webpage, let's append one:
EVENT TYPE=KEYPRESS CHAR="a" MODIFIERS="ctrl"
EVENT TYPE=KEYPRESS CHAR="c" MODIFIERS="ctrl"
WAIT SECONDS=1
URL GOTO=javascript:(function(){var<SP>t=document.createElement("input");t.setAttribute("id","tempInput");document.body.appendChild(t);})();
EVENT TYPE=CLICK SELECTOR="#tempInput" BUTTON=0
URL GOTO=javascript:(function(){var<SP>t=document.querySelector("#tempInput");document.body.removeChild(t);})();
Obviously, this solution is far from ideal but it does its work (except 'iMacros for Firefox' v.9.0.3).
I use with the event "okCancelEvents" for validating my form in meteor.
But now, I want to use a textarea. The event "ok" don't work :(
Have you an idea of event with meteor for validate textarea ? :)
Thanks
I assume you're referring to the okCancelEvents function written in the Meteor Todos example, per this SO question. This function is designed to handle the events for an <input>, which is why its trigger for "ok/submit" is the user pressing enter (or blurring the <input>). See lines 59-61:
} else if (evt.type === "keyup" && evt.which === 13 ||
evt.type === "focusout") {
// blur/return/enter = ok/submit if non-empty
This won't work for a <textarea> because as a multiline input a <textarea> accepts enter presses because that's how a user types a new line. Submitting the form based on an enter press would be surprising to your users, to put it mildly. The focusout trigger should still work fine, however.
I'm trying to attach an event handler to the keyDown event in a canvas element. Here is a simplified version of my code.
class CanvasFun{
CanvasElement canvas;
CanvasFun(this.canvas){
print("Game is loading!");
this.canvas.onKeyDown.listen(handleInput);
}
void handleInput(e)
{
//breakpoint is never hit
print(e.keyCode);
}
}
I've removed some of the drawing code. In my main function I simply query the canvas element and pass it to my CanvasFun constructor.
I've also tried doing it this way:
void main() {
var canvas = query("#Game");
canvas.onKeyDown.listen(handleInput);
var canvasFun = new CanvasFun(canvas);
}
void handleInput(e)
{
print(e.keyCode);
}
The reason why the event is not firing is because the focus is on the document (or some other element like an input, for example). And in fact, canvas element even when focused does not fire an event. Some elements do, like input elements.
The solution is to listen to key down events from the document or window:
window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.
John McCutchan has written a nice Dart package to help handle keyboard input. You can read more about it here: http://dartgamedevs.org/blog/2012/12/11/keyboard-input/
Note that this library helps you handle input "correctly". You do not want to do any "work" in the input handling, instead you simply want to register that a key was pressed. You can check the state of any key presses inside of your requestAnimationFrame callback.
Hope that helps!
There exists a workaround to get the canvas-element accept KeyboardEvents:
Problems handling KeyboardEvents on DartFlash
Once you add the tabindex-attribute to your canvas-element, it can get the focus and then it will receive KeyboardEvents.
It looks like I can get it to work if I register the event on the document rather than the canvas element.
document.onKeyDown.listen(handleInput);
I was wondering if there is a way to get the current value of a on the keydown or the keypress event. To define "current value" in a better way, I mean, by this, the value of the textarea, including the "just inserted" character. By default on these events the value does not change. If this is not possible i would like to know if there is a cross browser way to get the just inserted value of the key that I pressed (I don't need the keycode, because e.g. this does not define, supposing that I enter a characterm if the character entered is Uppercase or Lowercase).
You'll have to wait for the keyup event to fire before the actual value changes.
Otherwise, for keydown or keypress, you have to map the character code on the event (and this is different per browser unless you use some JS library like jQuery which standardizes it) and determine the cursor position and modify the value that way. This can get a little tricky especially around browser support unless you use a JS library to do this.
I wrote a module that translates keypress, keydown, and keyup events into characters and keys respectively. https://github.com/fresheneesz/keysight
Example:
textarea.addEventListener("keydown", function(event) {
var character = keysight(event).char
if(character === 'w') {
console.log("got lower case w")
} else if(character === 'W') {
console.log("got upper case w")
}
})