textarea trailing new lines when selected via keyboard vs mouse - javascript

If I initialize a textarea with 3 rows of text and 3 newlines like this
<textarea rows="10" cols="50">
A
B
C
</textarea>
When you highlight the text with a mouse the clipboard will contain all 3 new lines.
When you highlight the text with ctrl+a and copy the clipboard will contain an extra 4th new line.
This is causing me some problems in a WYSIWYG editor that I'm working on. How would you make the copy paste behavior act the same no matter if the text was highlighted with a keyboard or a mouse

Ok. But where is problem?
In both cases you have the same content in clipboard.
Open console and try this:
function showCB() {
let text = window.getSelection();
text = text.toString();
console.log(text.length);
}
document.addEventListener('mouseup', showCB);
document.addEventListener('keyup', showCB);
document.addEventListener('selectionchange', showCB);
<textarea rows="10" cols="50">
A
B
C
</textarea>

Related

wrap selected text inside div in stars vuejs

Hello everyone I'm trying to wrap the selected text inside a text area between 2 stars
Entry would be for example vuejs => ** vuejs ** . Though I didn't figure out how to make the selected text wrapped with stars only.
//this is my text area object
<textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper
votre texte" ></textarea>
//this is the method that gets triggered on a button click when the text gets selected
makeSelectedTextBold(){
let text = document.getElementById('question').innerText;
// selected text
let selection = window.getSelection().anchorNode.data;
console.log(selection)
// wrap text to be shown on button click (I couldn't figure this out can someone help me)
},
This will help with the HTML:
<button id="button" onclick="makeSelectedTextBold()">here<button>
<textarea class="outline-none w-100" id="textAreaExample3" rows="4" placeholder="taper votre texte" ></textarea>
This will help with the JS:
document.getElementById("button").addEventListener("click");
function makeSelectedTextBold(){
let text = document.getElementById("textAreaExample3").value;
console.log("text:" + text)
let selection = window.getSelection();
console.log("selection:" + selection)
}
And this should help with finding and replacing the text:
Find and Replace for an Textarea
I don't quite understand what you're trying to do. Make ALL the text in the text area bold, or make the text appear in a console log in bold?

On copy paste and key press formatting issue in editable content

i have any issue when i copy some rich text from like web page or word file to editable content in my site <p contenteditable> edit-table content </p>
than copy text font property auto set here like text color , style etc
so i use below code for set original formatting
var c1 = $(document).on('paste', '[contenteditable]', function (e) {
if(c1){
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
return false;
}
});
and its working when paste , but if i remove text and type on content than pasted text property set here like their color , css , font-bold etc , not to set plain/text,
so how to set rich text to plain/text in type on editable content ?

How do you insert a special character into a text input at an arbitrary position on button click?

This question has been asked and answered several times for example. However none of them address inserting at an arbitrary point.
So if you have a text input or textarea and a button for some symbol that isn't on the keyboard (e.g. pi) or a button that if text is highlighted you add an accent or some other diacritical mark. How would you insert that at the current caret position or selection? This will not necessarily be at the end if the user moves the cursor and when the mouse is clicked you lose focus on the input which will remove the caret or selection.
<input id="formula" type="text">
<button onclick="insertIntoFormula">π</button>
Sounds like you want .selectionStart (the starting index of the highlighted text) and .selectionEnd (the ending index of the highlighted text). If it's just a cursor, they'll both just return its position.
function insertIntoFormula(specialChar) {
const textarea = document.getElementById('formula');
const insertStartPoint = textarea.selectionStart;
const insertEndPoint = textarea.selectionEnd;
let value = textarea.value;
// text before cursor/highlighted text + special character + text after cursor/highlighted text
value = value.slice(0, insertStartPoint) + specialChar + value.slice(insertEndPoint);
textarea.value = value;
}
<input id="formula" type="text">
<!-- remember to actually pass the special character -->
<!-- (you *could* just get the innerText of the triggering button but I wouldn't recommend it) -->
<button onclick="insertIntoFormula('π')">π</button>
<button onclick="insertIntoFormula('é')">é</button>

What portion of input field is occupied by the text?

I am trying to make a auto (height) increasing text field. So I need to know when to increase the height of the input field. For that I need to know if the text has already filled the input field or not. Is there a way for this ?
If it can be useful, a quick solution with a textArea is the next one:
Javascript:
function resizeText(){
var cont = document.getElementById("mytext");
while (cont.scrollHeight == cont.clientHeight)
cont.rows--;
while (cont.scrollHeight > cont.clientHeight)
cont.rows++;
}
HTML:
<textarea id="mytext" rows="1" cols="30" onkeypress="resizeText()">
write here your text.
</textarea>

Remove textarea border on button click and select next textarea automatically

I don't have idea how to do this, although I've seen it on numerouse websites. So, it is obviously an easy code, but I got stuck.
I create a simple app that displays textarea and a button. When you click the button, it adds one more textarea below. Therefore, I want to remove the frame (border) of the previous textarea when you click the add button. And also, to automatically select the next one for typing.
CLARIFICATION: User types in textarea some text, and presses the red button. It becomes green. And the border of the first textarea disapears (only text remains) and the added textarea below is automatically selected (clicked) and user can type in the text and again press the red button and so on. If user decide to return and change the text of previous textarea, the border will appear again.
THERE IS THE FIDDLE
And here is the code:
<textarea rows="3" cols="30" ></textarea><br/>
<input type="button" style="background-color:red;width:48x;height:20px;" id="btn1" value="ADD" onClick="change(this);addmore();">
<div id="inner"></div><br/>
function change(myinput) {
myinput.style.backgroundColor = "green";
}
function addmore() {
var textarea = document.createElement("textarea");
textarea.rows = 3;
textarea.cols = 30;
var div = document.createElement("div");
div.innerHTML = textarea.outerHTML + '<br/><input type="button" style="background-color:red;width:48px;height:20px;" id="btn2" value="ADD" onClick="change(this);addmore();"><br/>';
document.getElementById("inner").appendChild(div);
}

Categories

Resources