在深入研究了jsfiddle之后，我发现CodeMirror具备创建高度定制的文本区域所需的一切，它是为编写代码而构建的，但通过一个小技巧，它可以应用于一般的文本区域。
参见DEMO
首先准备好文本区域：

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

然后将下面的脚本放在它后面以创建CodeMirror文本区域，并提供附加设置以将其转换为普通文本区域。

• mode：我在这里使用"none"来删除语法突出显示。
• lineWrapping：使用true对较长的行换行。

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

最后，使用CSS来控制大小，使其看起来像一个标准的文本区域：

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

<textarea onblur="this.focus()">this is a test</textarea>
<p><input type="button" value="Click me"></p>

这在IE/Chrome上可以正常工作，但在FF上不行。
所以这里有一个通用的解决方案：

<textarea onblur="doBlur(this)">this is a test</textarea>
<p><input type="button" value="Click me"></p>

<script>
function doBlur(obj) {
  setTimeout(function() { obj.focus(); }, 10);
}
</script>

我知道严格来说这不是你想要的，但我还是要作弊。
Javascript：

var textarea = document.getElementById('textarea');
var div = document.getElementById('holder');

var original_value = textarea.value;
textarea.onblur = function () {
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    textarea.style.display = "none";
    div.innerHTML = textarea.value.splice(end, 0, "</span>").splice(start, 0, "<span>");
    div.style.display = "block";
}

div.onclick = function () {
    div.style.display = "none";
    textarea.style.display = "block";
    textarea.value = original_value;
}

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

超文本：

<p><textarea id="textarea" rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<div id="holder"></div>
<p><input id="click" type="button" value="Click me"></p>

CSS：

textarea, #holder{
    height: 120px;
    width: 300px;
    border: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
    font-size: 10pt;
    font-family: Arial;
}
#holder{    
    display: none;
}
#holder span{
    background-color: #b4d5ff;
}

演示：http://jsfiddle.net/Mb89X/4/

您可以将textarea Package 在iframe中，当单击按钮时，iframe仍然在框架内显示所选内容。
This fiddle使用srcdoc属性，只有Chrome和Safari 6支持该属性。不过，您仍然可以使用没有该属性的iframe。
编辑：这里有一个new even hackier fiddle，使用jquery添加iframe，至少在Chrome和FF中工作（出于安全原因，IE不允许iframe中的数据URI）

你想做的事情在文本区域是不可能的。
我建议使用div和contenteditable="true"以及rangy，而不是使用文本区域，然后将选中的文本换行，或者选择焦点和模糊事件上的文本。
这个演示演示了如何选择文本：http://rangy.googlecode.com/svn/trunk/demos/highlighter.html

从@囚犯的想法，我想进一步改进，直到它的感觉像一个自然的行为与滚动和调整大小的功能。
主要的想法是相同的。我也做了完整的演示与评论**here**。我转贴如下的上下文这个问题。

var input = document.getElementById('input');
var div = document.getElementById('holder');

function syncSize() {
    div.style.width = (input.scrollWidth - 4) + "px";
    div.style.height = input.style.height;
}

new MutationObserver(syncSize).observe(input, {
    attributes: true,
    attributeFilter: ["style"]
});

syncSize();

input.onchange = () => syncSize();

input.onblur = () => {
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var text = input.value;
    div.innerHTML = text.substring(0, start) +
        "<span>" + text.substring(start, end) +
        "</span>" + text.substring(end);
    div.style.display = "block";
}

input.onfocus = () => div.style.display = "none";

input.onscroll = () => div.style.top = -input.scrollTop + "px";

input.value = "Lorem ipsum dolor sit amet";

input.select();

#container {
  position: relative; 
  overflow: hidden;
}

#input {
  width: 400px;
  height: 150px;
}

#holder, #input {
    padding: 2px;
    font: 400 13.3333px monospace;
    border: 1px solid #a9a9a9;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#holder {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    pointer-events: none;
    border-color: transparent;
}

#holder span {
    background-color: #c8c8c8;
    color: black;
}

<div id="container">
  <textarea id="input"></textarea>
  <div id="holder"></div>
</div>

如果按钮的:focus不重要，可以使用

$('input[type=button]').click(function () {
    $('textarea').focus();
});

这是Fiddle。

试试这个：

var element = document.getElementById('text')
if(element.setSelectionRange)
{
    element.focus();
    element.setSelectionRange(2, 10);    
}
else if(element.createTextRange)
{

    var selRange = element.createTextRange();
          selRange.collapse(true);
          selRange.moveStart('character', 2);
          selRange.moveEnd('character', 10);
          selRange.select();
          field.focus();
} else if( typeof element.selectionStart != 'undefined' ) {
      element.selectionStart = 2;
      element.selectionEnd = 10;
      element.focus();
}

http://jsfiddle.net/inser/YJzvb/2/