Get character inserted at <textarea> on keypress or keydown - textarea

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")
}
})

Related

Issue adding an Emoji to TextInput for React-Native on iOS

I've been having an issue with maxLength on <TextInput/>in ReactNative and I'm pretty sure its only happening on iOS.
The problem:
If the last character of an input is an emoji, and that emoji puts you over the maxlength number then it deletes the entire input! An example of it is if the maxLength is set to 5 and the input is "xxxx" (4 characters) and then you add an emoji the entire input text gets deleted. I'm sure this has something to do with emojis mostly being 2 characters but I can't seem to find an "eloquent" work around!
Snack to see exactly what I'm talking about:
(I've only been able to replicate it in iOS)
https://snack.expo.io/#sararan/textinput
Things I've tried:
Adding an onKeyPress event (that gets hit before the onChangeText event) that calls e.stopPropagation() and e.preventDefault() (both for good measure ;) ). But it doesn't actually stop the event and I'm thinking it has to do with how react handles events and maybe that it's already bubbled up by this time?
Taking out maxLength altogether and creating my own rules that splices the input if its over the length I want and then replaces any special characters something like...
const onChangeText = (value) => {
if (value.length > 5) {
value = value.slice(0, 30).replace(/[^\w\s]/gi, '');
}
setText({ value });
};
but this solution seems to cause the flickering that we all hate with these types of solutions.
I'm wondering if anyone might have run into this before and might have a more eloquent solution? Thank you for your help!

iMacros FF: How to de-select text after EVENT TYPE=KEYPRESS ctrl+a?

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).

Validate textarea with meteor

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.

Dart language arrow keys event

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.

Grails: How do I make a g:textfield to load some data and display it in other g:textfield?

I have two g:textfields
in the first one I should write a number lets say 12 and in the g:textfield next to it it should load the predetermined name for number 12.
The first one is named 'shipper' and the other 'shipperName'
Whenever I write the code 12 in the 'shipper' txtfield, it should return the name of the shipper in the 'shipperName' box.
Thanks in advance!
Examples:
If I write the number 12 it should return USPS
http://i53.tinypic.com/2i90mc.jpg
And every number should have a different 'shipperName'
Thanks again!
That's quite easy if you'll use jQuery. Check out the event handlers ("blur" is the one you want which occurs when the user leaves the numerical box).
For example:
$("#shipper").blur(function() {
$("#shipperName").load(
"${createLink(controller: 'shipper', action: 'resolveShipper')}?id=" +
$("#shipper").val()
);
});
The $(this).val() at the end is the value of the input field the user just left.
And the "ShipperController.resolveShipper" action would look something like this:
def resolveShipper = {
render text: Shipper.get(params.id).name, contentType: "text/plain"
}
There are other things you might want to do, like automatically filling in the shipperName field as the user types without leaving the edit field, probably after a delay. However the event handler stays the same, just the event is changing (from "blur" to "change" or something like this)
To relate two strings, it's easiest to use an object to create a dictionary/ map, as shown below;
$('#input1').bind('keyup',function() {
var map = {
"1":"One",
"2":"Fish",
"3":"Bar"
};
$('#input2').val(map[$(this).val()]);
});
You can see this in action here: http://www.jsfiddle.net/dCy6f/
If you want the second value only to update when the user has finished typing into the first input field, change "keyup" to "change".

Resources