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>
Related
When an insertReplacementText input event type, as defined in this W3C Editor's Draft, takes place on a textarea element, the data property or attribute provides the text that was added to the textarea value, replacing some other text, such as when right-click on a misspelled word and the context menu provides suggested words.
The misspelled word does not have to be selected first; and, if the textarea has the focus (the cursor could be far from the misspelled word), when the right click takes place, the cursor is not moved at all.
After the replacement, the cursor is positioned to the right of the new text, as in a paste event. The difficulty is determining the length of the text that was replaced and or it's value.
I ask because I'd like to capture the needed information to undo/redo this event.
Thank you.
Update:
If you maintain a copy of the last value of the textarea in RAM or other lcoal storage options, then there is a way to accomplish this; although the event itself provides little data. I was rather stupid at first, as I was testing this in a separate piece of code, because I forgot that, in the code of my particular project, there is always in RAM a copy of the last value in the textarea. Having that information makes this operation very similar to a paste event when there is a selection before the paste that is replaced by the pasted text. After the replacement is performed, the cursor is positioned immediately to the right of the last character of the replacement text. The data property of the insertReplacementText event contains the value of the inserted text.
Thus, it is a matter of arithmetic involving the length of the new text, the difference in the length of the previous copy of the textarea value's length and the length of the DOM element's value after replacement, and the cursor position after the replacement has been performed. The difference in the length's of the textarea values is the difference in the length of the old text and new text. This provides the selection range from which to extract the old text from the saved copy before updating the copy to the new value. The selectionStart is the same for both the old text and new text; the difference is in the selectionEnd based on the lengths, if not equal.
As long as the browser keeps positioning the cursor to the right of the last character of the replacement text, and you maintain a copy of the last value of the textarea, it appears that this ought to work.
Thank you.
Hellow,
Mozilla's Firefox Browser allows doing multi-line selections on the default HTML <textarea> field, using the common way by pressing CTRL while selecting some text using the mouse.
My question: Is it possible to receive the respective selection data?
I already tried using the getSelection() method on the global window object, but this contains just nothing. The selectionStart and selectionEnd properties on the HTMLTextAreaElement itself also just contains the last selection made and I also didn't found any other - may Firefox own - attributes or functions which allows me to get access to them.
Of course, it is also possible to create an own listener using the select event on the respective <textarea> field. However, I guess this is a horrible idea and leads to incorrect information if not all possible procedures, which manipulates or changes the selections in any way, are really covered and on track.
Thanks.
Is this what you're looking for?
First you get the whole value of the textarea. Then you take the substring between the selectionStart and selectionEnd - which is the selected portion of the content.
// Create a reference to the textarea object for simpler code after this
var textarea = document.getElementById('textareaId');
// Get the part of the value that is selected
var selected = textarea.value.substring(textarea.selectionStart,
textarea.selectionEnd);
I have two textarea elements. I want to mirror the input given to one text area which has focus to another textarea. Please note that this is not equivalent to copying the values, since one textarea may already have some input which I do not want to copied. Thus only the input given to text area should be forwarded onto second textarea.
Something on the lines of:
$('#textarea1').keyDown(function(e) {
textarea2.sendCommand(e.keyCode)
});
Is something like this available in javascript?
If I want to know when an editable field (say, an input text field or a contenteditable div), I know that I can use the keyup event.
However, I can only see what the new text is, and what the text was prior to the edit, but I would like to get some additional information about the edit.
For example, one case where this would be ambiguous would be if the input text was originally a and the new text was aa. Then:
It could be the case that the user put the cursor before the a, and then typed another a.
It could also be that the user put the cursor after the a, and then typed another a.
It could even be that the user highlighted the a, then hit Ctrl+V (with aa in the clipboard).
I would like to be able to distinguish all the cases. For example, if I could get information of the form "insert a at position 0" or "delete range 0-1 while inserting aa in its place" it would be perfect for my purposes.
Is it possible to get this kind of information?
You could 'diff' the text before and after an edit, however, this will not allow you to distinguish between all of the cases you have mentioned. The only mechanism I can think of is to monitor the cursor (or caret) position each time a keydown event occurs, as described in this answer:
Get caret position in HTML input?
I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?
Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}
You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.