Textarea with controls in container and outline focus on parent

by lid0

HTML

When the textarea get the focus, the entire container will get the visual focus outline;
<br>
<pre>
    It does not use a top border instead:
    Both the buttons and the textarea are in the same container and they are both 
    on a relative position.
    to get the focus around the entire container I use a an helper div.show_focus
    that takes the size of its container, and is position in the back using z-index.
    some div additional div nesting is required to allow proper z-index rendering.
    
    Tested and optimized on chrome. 
    
    known issues:
    the outline does not render properly at the bottom property of .show_focus 
    is not consistant between browsers;
   
    .show_focus{
        bottom: N px
    }
    
</pre>

<div style="position:relative;">
    <div style="width:500px;background:#cfcfcf;padding:20px;z-index:-9999;position:absolute;">
        <div class='c'>
            <div class='controls'>
                <img src="https://meta.discourse.org/uploads/default/32688/51633085b6bebb12.png" />
            </div>
            <textarea class='ta'>Click here to get nice blue outline, or click on the buttons to add some text</textarea>
            <div class='show_focus'></div>
        </div>
    </div>
    <div>

CSS

.c {
    position:relative;
    width:100%;
}
.controls {
    width: 100%;
    height:30px;
    border-bottom:1px solid rgb(214, 214, 214);
    background:#fff;
}
.ta {
    box-sizing:border-box;
    /** prevent border,margin,padding, in dim calculation */
    border:0px;
    width:100%;
    resize: none;
    min-height:150px;
    padding:0px !important;
    padding-left:2px !important;
    margin-top:0px;
}
.ta:focus {
    outline: none;
}
textarea:focus ~ div {
    /*border:1px solid red;*/
    box-shadow:0 0 15px rgba(51, 153, 255, 0.4);
}
.show_focus {
    z-index:-999;
    width:100%;
    display:inline-block;
    position:absolute;
    top:0px;
    bottom:5px;
    left:0px;
    right:0px;
}

JavaScript

$.caretTo = function (el, index) {
    //*https://github.com/DrPheltRight/jquery-caret/blob/master/jquery.caret.js**/
    if (el.createTextRange) {
        var range = el.createTextRange();
        range.move("character", index);
        range.select();
    } else if (el.selectionStart != null) {
        el.focus();
        el.setSelectionRange(index, index);
    }
};

//add some text when click on buttons
$("div.controls").click(function () {
    $(".ta").val($(".ta").val() + "Add some text from buttons click \r\n" + new Date());
    $(".ta").focus();
    $.caretTo($(".ta")[0], $(".ta").val().length); //move to end

});