Problem with capitalized words in a textarea

Question

Lets say i have an <input> and a <textarea> and some javascript where i send the value of the <input> to the <textarea> with some extra text like my snippet below.

I have the property text-transform: capitalize in my <input> style and i cannot manage to send the text from input> to the <textarea> with the words capitalized as it is.

If i give text-transform: capitalize to the <textarea> it makes every word capitalized which is unwanted.

How do i get around this ?

function sendText(){
  var input =document.getElementById("input");
  var textarea =document.getElementById("textarea");
  
  textarea.value ="My name is " + input.value;
  
  
}

input{
  margin-right:10px;
 float:left;
  text-transform: capitalize;
}
textarea{
  height:30px;
  width:140px;
  float:left;
  
}

<html>
<body>
  <input id="input" onkeyup="sendText()" placeholder="Your Name Here"><textarea id="textarea"></textarea>
</body>
</html>

text-transform does not apply to the value, instead make the first char of input uppercase, https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript — Lawrence Cherone, Dec 13 '20 at 23:57
`text-transform: capitalize` does however affect the results of calling element.innerText. However I haven't confirmed that .innerText works with input. — ControlAltDel, Dec 14 '20 at 00:21

score 4 · Accepted Answer · answered Dec 14 '20 at 00:00

CSS is just CSS, it won't alter the field's value. You need to capitalize the value yourself:

function sendText(){
  var input = document.getElementById("input");
  var textarea = document.getElementById("textarea");
  
  textarea.value = "My name is " + capitalize(input.value);
}

function capitalize(str) {
  return str.replace(/\b\w/g, function(char) { return char.toUpperCase(); });
}

input{margin-right:10px;float:left;text-transform:capitalize}textarea{height:30px;width:140px;float:left}

<input id="input" onkeyup="sendText()" placeholder="Your Name Here"><textarea id="textarea"></textarea>

score 0 · Answer 2 · answered Dec 14 '20 at 02:49

Maybe you could try this? In this code, I simply changed the textarea into contenteditable for styling. Next, I made it so it would make a new element.

function sendText(){
  var input =document.getElementById("input");
  var textarea =document.getElementById("textarea");
    
  
  textarea.innerHTML ="My name is <b id='name'>" + input.value + "</b>";
}

input{
  margin-right:10px;
  float:left;
}
#textarea{
  height:30px;
  width:140px;
  float:left;
  border: 1px solid;
  font-family: Arial;
}
#name{
  text-transform: capitalize;
}

<html>
<body>
  <input id="input" onkeyup="sendText()" placeholder="Your Name Here">
  <div contenteditable="true" id="textarea"></div>
</body>
<html>

Problem with capitalized words in a textarea

2 Answers2