Insert <br /> into textarea

Question

0.00/5 (No votes)

See more:

This textarea is resizable and has a close button to enter text and close the textarea. Only text remains, but there is no
at this time.
The result is shown below.
Is there a way to insert a line break to fit the size of the textarea?

[------------------[O X]
| text text text text tex|
|t text text text text te|
|t______________________|

after click "O". No line break.
text text text text text text text text text text"

I want this.
text text text text tex\r\b
ext text text text tex\r\b
t

What I have tried:

JavaScript

document.getElemenyById('closebtn').addEventListener('click'), (e) =>{
    addlinebr(e)
}

addlinebr(_e) = function(){
   var texta = $("#texta");
   var text = texta.val();  // text
   var tsize = texta.attr("font-size");  // font size
   var a_width = texta.width();   // textarea width
   /* I don't know how... */
}

Posted 29-Dec-22 11:20am

Chopin2001

Updated 30-Dec-22 8:32am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dave Kreskowiak · Answer 1 · 2022-12-29T11:40:00

Solution 1

It sounds like you're trying to do something that you shouldn't be doing. There is no reliable way to do that because as the text area size changes, you're going to have to go through the text, remove any existing line breaks, and put new ones in for the new size. That's just stupid.

You might want to start by explaining what it is you're really doing with the text area and why you want line breaks inside word boundaries.

Posted 29-Dec-22 11:40am

Dave Kreskowiak

Comments

Chopin2001 30-Dec-22 14:33pm

Below is the improved code.

Dave Kreskowiak 30-Dec-22 14:50pm

You posted your code snippet as an answer to your own question.

Ignoring that, your code, as posted, is silently failing because of a misspelling.

And you never said why you want to do this. I can't think of a single valid reason to do it.

Chopin2001 · Answer 2 · 2022-12-30T08:32:00

This work.

JavaScript

var selection;
if(window.getSelection){
   selection = window.getSelection();
}

var input = document.getElementById("textarea");
const input_width = input.width();
const hidden = $("hidden");
const hidden_width = hidden.width();
var select;
var text = input.val();

for(n = 0; text.length; n++){
   input.prop('selectionEnd', n);
   select = selection.toString();
   hidden.html(select);
   if( hidde.width > input_width ){
      insertAtCaret("\r\n");
   }
}

insertAtCaret = function(input, text){
   input.setRangeText(
      text, // text insert to
      input.selectionEnd, // point to start change
      input.selectionEnd, // point to end change
      'end') // after position of caret.
}

But this is slow.
Are there any better improvements?
Thanks!