Delving into jsFiddle, I came across CodeMirror, a tool that provides all the necessary elements to create a highly personalized textarea. Although primarily designed for coding, with a simple trick it can be adapted for general textareas as well.

Take a look at the DEMO

To start off, set up a textarea:

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

Next, add the following script below it to transform the textarea into a CodeMirror textarea and apply extra configurations to revert it back to a regular textarea.

• mode: In this case, I'm using "none" to eliminate syntax highlighting.
• lineWrapping: Set it to true for automatic line wrapping on long lines.

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

Lastly, employ CSS to adjust the dimensions and mimic the appearance of a standard textarea:

.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>

Functioning properly in IE and Chrome, but not in FF.

Here's a universal fix:

<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>

Although this might not be exactly what you were looking for, I'm going to take a shortcut.

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

HTML:

<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;
}

demo: http://jsfiddle.net/Mb89X/4/

You may consider enclosing the textarea in an iframe, allowing the selection to still be visible within the frame upon clicking the button.

This particular demonstration makes use of the srcdoc attribute, which is only compatible with Chrome and Safari 6. However, you can opt for using an iframe without relying on that attribute.

UPDATE: Check out this alternative fiddle that employs jQuery to insert the iframe; it functions effectively in Chrome and Firefox (since Internet Explorer restricts data URIs in an iframe due to security concerns).

It is not achievable with a textarea to accomplish what you are attempting.

Instead of utilizing a textarea, my recommendation would be to use a div with contenteditable="true" along with rangy. Then you can wrap the selected text or choose the text during focus and blur events.

This rangy demo illustrates how to select text:

Given inspiration from @Prisoner, my goal is to enhance the functionality until it seamlessly integrates with scrolling and resizing.

The core concept remains unchanged. I have also developed a comprehensive demonstration with annotations here. Below is a repost for the context of this discussion.

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

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

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

synchronizeSize();

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

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>

In case the button's :focus is not important, this alternative can be considered:

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

You can find a working example on this link.

Give this a shot:

const textElement = document.getElementById('text');
if (textElement.setSelectionRange) {
    textElement.focus();
    textElement.setSelectionRange(2, 10);    
} else if (textElement.createTextRange) {
    const selRange = textElement.createTextRange();
    selRange.collapse(true);
    selRange.moveStart('character', 2);
    selRange.moveEnd('character', 10);
    selRange.select();
    textElement.focus();
} else if (typeof textElement.selectionStart !== 'undefined') {
    textElement.selectionStart = 2;
    textElement.selectionEnd = 10;
    textElement.focus();
}

Check it out here!

Developed a custom jQuery plugin that enhances a specified <textarea> element by adding a subtle grayed out selection when the element is not in focus.

// Created a jQuery plugin to enhance visibility of textarea selection when unfocused.                                                                                                                        
// This is achieved by overlaying the selected text with <mark> tags within an underlay                                                                                                                       
$.fn.selectionShadow = function () {
  const $input = this
  const prop = n => parseInt($input.css(n))
  const $wrap = $input.wrap('<div>').parent()   // wrapper                                                                                                                                               
    .css({
      ...Object.fromEntries(
        'display width height font background resize margin overflowWrap'
          .split(' ').map(x => [x, $input.css(x)])),
      position: 'relative',
      overflow: 'hidden',
      border: 0,
      padding: ['top', 'right', 'bottom', 'left'].map(
        x => prop(`padding-${x}`) + prop(`border-${x}-width`) + 'px'
      ).join(' '),
    })
  const $shadow = $('<span>').prependTo($wrap)  // shadow-selection                                                                                                                                      
    .css({ color: 'transparent' })
  $input                                        // input element                                                                                                                                         
    .on('focusin',  () => $shadow.hide())       //   hide shadow if focused                                                                                                                              
    .on('focusout', () => $shadow.show())
    .on('select', evt => {                      //   if selection change                                                                                                                                 
      const i = evt.target                      //     update shadow                                                                                                                                     
      const [x, s, a] = [i.value ?? '', i.selectionStart, i.selectionEnd]
      $shadow.html(x.slice(0, s) + '<mark class=selectionShadow>' +
                   x.slice(s, a) + '</mark>' + x.slice(a))
    })
    .css({
      boxSizing: 'border-box',
      position: 'absolute', top: 0, left: 0, bottom: 0, right: 0,
      overflow: 'hidden',
      display: 'block',
      background: 'transparent',
      resize: 'none',
      margin: 0,
    })
  $('head').append(
    `<style>mark.selectionShadow { background: #0003; color: transparent }`)
}

To activate the plugin, use $('textarea').selectionShadow().

The plugin adds an 'underlay' layer to the textarea and ensures it matches the padding, font style, and word wrapping settings. This way, the textarea and underlay text align perfectly. The underlay updates alongside the textarea's selection, highlighting the current selection using <mark> tags with a gray background (text color set to transparent to avoid interference with text edges).

This implementation was crafted for personal web projects, feel free to utilize!