Display selection when textarea loses focus

After digging through jsFiddle, I found that CodeMirror has everything you need to create a highly customized textarea. It was built for writing codes but with a small trick, it can be applied to textareas in general.

See DEMO

First have a textarea ready:

<textarea id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>

Then place the following script after it to create a CodeMirror textarea, and provide additional settings to convert it to a normal textarea.

• mode: I use "none" here to remove syntax highlighting.
• lineWrapping: use true to wrap for long lines.

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("a"), {
    mode: "none",
    lineWrapping: true
});

Finally, use CSS to control the size and make it look like a standard textarea:

.CodeMirror {
    font-family: monospace;
    font-size: 12px;
    width: 300px;
    height: 100px;
    border: solid 1px #000;
}