Question

Consider the following scenario:

HTML

<input type="text" id="source" value="the quick brown fox">
<input type="text" id="target">

CSS

#source
{
  text-transform: capitalize;
}

JavaScript

function element(id) {
  return document.getElementById(id);
}

element('target').value = element('source').value;

---

After CSS styling, #source should display “The Quick Brown Fox”.

The objective is to get the text-transform-ed value and dump it into #target. Is this possible to achieve?

Answer 1

No. You need to use JavaScript to transform it physically

Assuming you already know that source is text-transformed to capitalize, you can do

window.onload=function() {
  document.getElementById("source").onblur=function() {
    var tgt = document.getElementById("target");
    var capitalised = [];
    var parts = this.value.split(" ");
    for (var i=0;i<parts.length;i++) {
      capitalised.push(parts[i].substring(0,1).toUpperCase()+parts[i].substring(1));
    }
    tgt.value=capitalised.join(" ");
  }
}