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);
Related
I have to somehow split text from textarea by rows. It's not a problem when user hit enter on it because then in string is \n char so it's easy to detect.
But what if browser automatically move some word to another row in textarea? Is browser put some special char when sentence is split automatically?
var splitted = $('#textArea').val().split("\n");
Is not a soulution because it's work only when user hit enter.
I have a problem. I want to create a directive in AngularJS that restricts the input to certain characters only. This I can achieve. The issue is fine when I am typing at the end of a string, but if I use my mouse to change the text cursor/caret position [that flashing horizontal line] and type an incorrect character, the text cursor/caret jumps to the end of the string! Is there any way to STOP this?
In other words, prevent the event from happening and keeping my text cursor/caret in the same position? I am trying to ensure that in the text box the user can only type at most one space, and prevent multiple. Upon hitting multiple the text cursor does not move and nothing happens.
E.g.
"a b c" is valid. "a b c " is valid
"abc" is valid.
"a[space][space]b" is not valid, note the [space] = ' '.
You can try it yourself on this example but it's with digits:
https://embed.plnkr.co/hihevOKDtXSVmVqP0KBp/
Here's an example with digits if that's easier:
digitsOnly I type: "12345|" where the horizontal line is the text caret
then I type from this position something incorrect like 'a' "123|45" the text cursor/caret jumps to the end or back to here "12345|". I do not want that. I want the text cursor to still be between 3 and 4.
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('>>', '<<');
});
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 (' ');
});
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?
I'm using TinyMCE to let users edit and format text, output is html code.
The html is then sent to the server and is pushed to other clients that can follow the edit progress on a webpage, the html is inserted into a div so users can see the format but they are not able to edit.
Now I want the cursor position and any selection the user makes in the editor to show up on the readonly page using highlight(background color) if selected or inserting an empty span with a black border between characters to imitate the cursor position.
I made an attempt using
editor.tinymce().selection.getRng()
which gives me the start and end position of what the user sees(formatting characters are not counted)
Then I traversed the DOM and counted the characters in every text element wrapping the ones selected with a highlight span. This resulted in messy code but worked pretty well until I hit a non ascii or encoded character in the textblock.
Example html
<p>abc <b>de</b>fg</p>
looks like this to the user
abc defg
Say user selected character c to d (selection covers c, a blank, first half of the bold tag and d),
tinymce will return range start:2 end:5
but the actual characters behind would be start:5 end:16.
Just wrapping the text from char 5 to 16 in a highlight span will result in bad html.
Checking for words starting with & and ending with ; and adding number of positions will turn into a mess. There has to be a simpler way
How do I calculate how many "visible" characters a set of html character will turn into?
Or maybe you would attack the problem in another way
Thanks
PS 1
I've looked into the various jquery highlight plugins but they seem to highlight based on a search string. Those does not work in the case user selects one character and that character exists several times, they will then highlight all occurences.
I've tackled this problem in my Rangy library: the TextRange module concerns itself with the text the user sees. It sounds like you need the selectCharacters() and toCharacterRange() methods of Rangy's Range objects.