Live pattern matching in a textarea to trigger events - javascript

If you had a textarea, and you wanted to execute a javascript function after a pre-determined 2 character string was entered, how might you go about monitoring for that string?
A caveat is that the 2 character string might not be entered on sequential key presses.
Example:
You want to trigger an event after the 2 character string "<<" is entered. So you are typing and you enter "<", then you click somewhere else in the textarea and change some text, then come back to where you left off and put a second "<" character next to the first. The fact that there are two adjacent "<<" characters should trigger an event that can be capture by javascript. How would you monitor for and create that event?

You can check the entire textarea content onkeyup. I doubt that the textarea's content will become so big so as to make it prohibitive.
document.getElementById('textarea-id').addEventListener('keyup', function () {
this.value = this.value.replace('>>', '<<');
});

Related

change input character to other character

I have an input text field that users should type their name in it (kind of).
I see in a website that every letter I type it changes the letter immediately to another character in my own language. for instance it changes the "D" in English to "ی".
I want the same thing.
How can I achieve this? should I use JavaScript and change every key code on keydown event?

Reading input from user but not displaying it in the text field - HTML, JavaScript

I am currently working on a encoder. I basically have a textarea which accepts the string. When a letter is displayed using the document.onkeydown(event.keycode) I record the keystrokes and display it back on the same field. The problem arises after the onkeydown() finishes, the encrypted letter displays on the TextArea followed by the original letter.
I tried deleting the last added letter using splice or substring functions but for a fraction of a second you can see the letter or if you hold a key you can see the actual letter. So how do I hide the original input?
Is there is something similar in javascript like C's getch() where a key is pressed and no output is shown?
Thanks in advance.
The function you're looking for is preventDefault().
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
So inside your event handler, you would call preventDefault on the event parameter. This prevents any default behavior from occurring, and lets you defined it yourself. In your case, this would prevent the letter pressed from being added to the input field.
For example:
function onClick(e) {
e.preventDefault();
//your code here
}

Detection for auto indentation in TextArea with JavaScript

I have a textarea where users can input text.
If the current line starts with 3 spaces and the user hits enter, it will automatically insert 3 spaces and set the cursor right after the spaces. (there may be text before or after)
How can I detect such pattern with JavaScript?
Caret position in textarea, in characters from the start explains how to figure out where the caret is when the user hits enter so that you can check whether there are three spaces and a line break to the left.
Enter key in textarea explains how to detect the Enter key in a textarea and take an action.
Once you have a listener hooked up and know the caret location is caret, you can do something like
if (/(?:^|[\r\n]) (?:[^\r\n ][^\r\n]*)?$/
.test(myTextArea.value.substring(0, caret)) {
...
}
to take an action when there are exactly three spaces at the start of the current line.
To insert the 3 extra-spaces, you could do something like
myTextArea.value = myTextArea.value.substring(0, caret)
+ "\n " + myTextArea.value.substring(caret);

How do I bind a non-breakspace(alt-288 or  ) upon pressing the space bar in javascript?

I'm using OpenMRS, it's an opensource medical records system. OpenMRS has a built-in html editor and I use this mostly in javascripting ang building the forms. In one of my forms,I have a textarea. My client would like his entries(in paragraph or in list) to be indented in the textarea.
Now when you try indenting the paragraph in the textarea then save the changes and preview the form, the paragraph becomes justified instead of retaining the indented lines.
However, if I try indenting the paragraph using ascii code for non-break space by typing   or pressing alt-288, the paragraph becomes indented thus giving me the desired result. Now, the users don't prefer typing or pressing ascii equivalents coz that'll be hassle on their part.
I'm using mostly javascript and jQuery because it's what openmrs supports. If I could somehow bind the non-break space character upon pressing a key then this will work, but I'm at a lost here. How will I do this in javascript or jquery?
One solution which might work for you is to replace leading spaces in the textarea when you process/save or even each time it changes it something like :
ta.value = ta.value.replace (/\n +/, function (m) {
return '\n' + Array (m.length).join ('&#160');
});
The Array ... constructs creates an array containing length elements then joins with your non-breakspace character effectively creating a string of that many space chars.
Another possibility is to watch for space characters entering the text-area and transforming them. See here : Can I conditionally change the character entered into an input on keypress?

How to send the 'ctrl+end' key to <textarea> element so the cursor lands after last character

(send: that is to emulate typing these keys as user would normally do it)
I know this metod element.value = element.value, but I think it might be slow for textareas that have huge amount of data in them, like wikis etc.
Check this SO question: Javascript: Move caret to last character

Categories