CODEWITHSUNDEEP
javascripthtmlcss
theaspirator
theaspirator

Reputation: 45

Add line break to text area output after a certain number of characters in a form

I am creating a CV generator as a practice project, with a form to fill in your CV details on one half of the screen, and with the output that is filled in on the other half of the screen.

Now i have a section for previous jobs that includes a text area to describe the job, my problem is that i want the output to have a line break automatically after a certain amount of characters, what happens now is that it just keeps going to the right in one line no matter how many characters is inputed to the text area. It is the outputted text i want to have a line break not the text inside the text area field.

I have tried to find the solution but i cant find anything applicable probably because i do not know the correct terms to find the solution.

Any tips would be highly appreciated.

Html code below

<div class="kompetanse">
   <textarea rows="5" id="beskrivelse" placeholder="Beskrivelse" value=''></textarea>
</div>

css

    .input-fields .input,
    .kompetanse textarea {
       margin: 10px 0;
       background: transparent;
       border: 0;
       font-family: inherit;
       padding: 10px;
       color: #fff;
       font-size: 18px;
     }

    .kompetanse textarea {
      width: 88%;
      border-bottom: 1px solid white;
      margin-left: 6%;
    }

Upvotes: 1

Views: 647

Answers (2)

Anurag Hale
Anurag Hale

Reputation: 135

my guess is that you should look after the width and border values assigned in .kompetanse textarea class.

Upvotes: 1

StackSlave
StackSlave

Reputation: 10627

Here you go:

//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, breakAt; //for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  let w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  let w = within || doc;
  return w.querySelectorAll(selector);
}
breakAt = function(){
  const a = [...arguments], s = a.shift().split('');
  for(let v of a){
    s.splice(v, 0, '\r');
  }
  return s.join('');
}
// library above magic below
const ta = I('ta');
ta.value = breakAt(ta.value, 5, 8, 10, -6);
}); // end load
//]]>
<textarea id='ta'>Here is some test text to break!</textarea>

Upvotes: 1

Related Questions