Create new textarea when current textarea reaches the end - javascript

I want to have a textarea pass along any overflowing text to another textarea which is added after the current one, like how a word processor creates a new page when you reach the end of the current page. I've thought about how to achieve this and the first thing that comes to mind is to add a new textarea after reaching the end of the current one and place the cursor at the start of the new one. The only thing is, I don't know how I would go about processing certain events such as:
Select text across multiple textareas.
Paste text near the end of one textarea and correctly split it so that part of the text is pasted in a new textarea.
Remove empty textareas except the first one.
Is there an easier way I could go about doing this? Is there any way I could perhaps style a single textarea so that it just looks like there is a space between two lines to give the illusion that there are more than one textareas (that I could also style individually)?

Related

Copying text from one textarea element to another in real-time

I want to copy input from one textarea to another textarea in real-time. This is not a HTML editor or rich text editor. Just plain simple text without any markup.
This is what I am doing:
a. I can detect the point at which the cursor was clicked in the source text area using the following (on mouseup)
$("#txt1")[0].selectionStart)
b. I can detect the text selection using selectionStart and selectionEnd properties on mouseup.
This allows me to keep track of delete to be reflected in the other textarea. That is if delete is the key pressed, and a selection was made I know what was deleted to be relected in the target text area.
c. Where I am stuck is the simple issue of new characters entered. I think keeping track of key pressed would be the inefficient approach as I would have to check if control, alt, shift keys, among others were also held down. Besides there is the issue of repeatedy keys presses. The efficient way is possibly to get the characters actually entered from the source text area and NOT based upon key pressed.
Questions:
How do I get characters entered in the source textarea?
Is there a better way to update the target textarea in real-time? One way will be to continually update the content from the source to the target at regular interval but that would be inefficient. Any other approach?
I am open to using a contentEditable div in place of a textarea.
I need a solution that can work across different device types.
How do I get characters entered in the source textarea?
Just handle the input event of the first textarea and make the second textarea have the same value as the first.
let two = document.getElementById("two");
document.getElementById("one").addEventListener("input", function(){
two.value = this.value;
});
<textarea id="one"></textarea>
<textarea id="two"></textarea>

How to make a span from user selection (js)

I want to make a text editor. It should work the way all text editors work (including this one i am using right now), so the user makes a selection of the text, presses a button or whatever, and then some function is executed.
I want my editor to work in the following way:
1. User selects
2. Function selected() is triggered that makes a span around the selected text.
3. When user clicks a button such as "B" or "I", they invoke functions that change .style of the span element.
For now I figured out how to get string from user selection, nothing more than that.
<body>
<textarea onselect="selected()">Some text here, more text here.</textarea>
</body>
<script>
function selected() {
var preselection = window.getSelection();
selection = preselection.toString();
console.log(selection);
}
</script>
textareas can't contain spans, so you will need to use something like this if you decide to use spans:
<p contenteditable="true" ...
You probably don't want to fire your function every time a user makes a selection. Instead, just run the function if a user presses a button (like the bold button) and then pick up the selected text, if any, using something like:
document.getSelection().toString()
Now adding a <span> object to an HTML element is pretty easy, but the big challenge here is that you don't know if your selection will cross other span objects (like if the user already added some formatting). Notice that stackoverflow inserts characters like ** in the edit area and then does one pass to add in tags like <strong>. This is possible in a text area as well, so you wouldn't need contenteditable="true".
It is possible to analyze what is in your selection and then collect all elements involved, and rewrite them as needed. You would have to get all parent objects involved in the selection and then add <span> elements around the text inside each of the parent objects.
To simplify this, you might make a rule that only one level of tags is allowed in your editable region, and then always re-write for that so that the results would only have one level of span:
<span class="bold">This whole sentence is italic and </span><span class="italic_bold">this half is also bold.</span> with no nesting of these span tags.
Investigating these properties might help with dealing with nesting: https://developer.mozilla.org/en-US/docs/Web/API/Selection
These string commands might also help:
https://www.w3schools.com/jsref/jsref_obj_string.asp

Save caret position after html changes in contenteditable div

I am trying to create a div where, when the user right clicks on a word, it becomes red. This div is editable, so the user can change the text in it.
<div contenteditable="true" id="test"><span class="word">text</span></div>
So far, what I have done is, every time the event listener "input" is called, I loop through all the spans in the div and use regular expressions on their content to match them with (spaces)(words) or (words)(spaces). Then, i add a new span after the current one that contains the second matched part, and replace the content of the current span by the first matched part. I also add the class word to the span that contains the words, depending on the expression that was matched.
So Far this approach words, and I am able to right click on individual words to either put them in red or not.
My problem however is that when I insert and remove spans inside my contenteditable div, the location of the caret changes. The reason for this is probably because the length of the html inside the div changes more than the length of the text.
How could I make it so that after I type, paste or remove some text in the div, and that after my function separates the spaces from the characters in different spans, the caret remains exactly where it was.
In other terms, I would like to store the current caret position, modify the html(not the text) of my div, and then restore the previous caret position.
Does anyone have an idea regarding how I could proceed? Thanks for the help!

How can I add a tag text input system similar to StackOverflows system

Is it possible to just style the text inside the box? The system I had came up with was:
Make a Div that overlays the box
When typing in the box listen for spacebar
When spacebar is pushed, add it to an array, which then adds it to the list of Tags to appear in the div
When the divs width is > than the input box, limit the width to a set size
When adding more tags than the width allows, push new tag to array, scroll the div to the end and hide the overflow of the other tags
Listen for if the text box is empty and backspace is pressed
If pressed, populate the text box with the text of the last element in the array, and splice the last element to remove it.
This is the current method I mean to implement and can code it just fine. But I was wondering if there is a simpler way to do this and more cross browser / version friendly. I tried googling StackOverflows tag system, tags, tagging, and more but it's all really unrelated stuff. Any input would be nice sorry if this is a poor question, I can delete it or vote to close it if necessary. Thanks.
Number 4 can be written like so:
4.When number of divs is > than 5, return "You are only aloud 5 tags"

multiple contenteditable elements, using arrow keys to navigate

I got multiple <p contenteditable="true"></p> elements on a page. I'm looking for a solution to use arrow keys for navigating across those disjoint elements just as if they were one single editable element.
So for instance, if the caret is at the 10th character on the last line of the 1st paragraph and the user hits the down arrow key, the caret should jump to the 2nd paragraph and place the caret at the 10th character (if there's one) on its first line.
Appreciate any comments.
Revised answer
You can detect that the caret is at the start or end of the current editable element by using something like the following (example is for down array on the last line):
Detect the down arrow keydown event
Check if the caret is at the end of the paragraph by doing one of the following:
Create a Range (or TextRange in IE) from the selection object and comparing it to another Range that encompasses the whole paragraph. This is the slightly trickier but more seamless option. OR:
Store the selection and set a brief timer (say 1 millisecond) to allow the keypress to take effect. The function passed to the timer calls compares the current selection with the previously stored selection. If they're the same, the caret has not moved and must have been at the end of the paragraph.
If the caret is at the end of the paragraoph, move it to the start of the next editable paragraph.
This isn't the the usual behaviour of the caret but is reasonably easy to achieve and could be a reasonable compromise. The problem is that there's no reliable cross-browser way to work out the caret's coordinates.
What if you would make the container element editable, instead of every single paragraph?
For example:
<div contenteditable="true">
<p>Lorem ipsum</p>
<p>dolor sit</p>
</div>

Categories

Resources