CODEWITHSUNDEEP
cssvertical-alignment
Arif
Arif

Reputation: 966

Vertically centered cursor in textarea or editable div

Is it possible to put cursor vertically centered in textarea or editable div . See attached image please.

enter image description here

Upvotes: 2

Views: 2151

Answers (1)

Šime Vidas
Šime Vidas

Reputation: 185893

Ok, I used a little bit of JavaScript to make it work:

HTML:

<div id="test">
    <textarea autofocus></textarea>
</div>

CSS:

#test {
    width: 400px;
    height: 300px;
    line-height: 300px;
}

#test > textarea {
    display: inline-block;
    width: 100%;
    height: 1.4em;
    line-height: 1.4;
    border: none;
    resize: none;
    overflow: hidden;
    vertical-align: middle;
}

JavaScript:

ta.onkeyup = function () {
    var n = this.value.match( /\n/g );

    if ( n ) {
        this.style.height = ( n.length + 1 ) * 1.4 + 'em';
    } else {
        this.style.height = '1.4em';
    }
};

Live demo: http://jsfiddle.net/SPpKY/show/

However, it only works if line-breaks are entered manually...

Upvotes: 1

Related Questions