Getting the CSS-transformed value of an input via

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, text-transform is a display only transformation and doesn't actually modify the data inside the element.

Answer 2

Copying the CSS-transformed value from source to target won't work because the value hasn't actually changed, only the styling has. Other style attributes (like font-family, or color) would not transfer; text-transform will behave in the same limited way.

If you want to actually change the value of the string, which it sounds like you do, you will need to use JavaScript, possibly with RegExp.

Instead of this...

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

...this short bit of code should do exactly what you need:

element('target').value = element('source').value.replace(/(\b\w)/g, function (m, p1) {
     return p1.toUpperCase();
});

JSFiddle demonstration here.

SHORT EXPLANATION: The \b at the beginning of the RegExp looks for the beginning of any word and the \w (because it's captured inside the parentheses) captures any single alphanumeric character in that position. This is then stored in the argument p1 for the function, which merely returns a capitalised version.

Answer 3

mplungjan's answer is correct in that you can't use a JavaScript function to determine the transformed value. Ultimately, you'll need to do the transform in JavaScript.

However, you don't need to hard code in the capitalization transform as in mplungjan's answer. Perhaps some of your text is capitalized, while some other text is uppercase, and other text yet is normal. You can dynamically handle each of these cases, so long as you know all of the options.

What you would do is determine the style of the elements using JavaScript, then apply the appropriate transformation in your script and go from there. An excellent example of such a transformation is in mplungjan's answer.

Answer 4

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(" ");
  }
}