Is the caret on the first line of the textarea? On the last line?

dom, html, javascript, jquery, textarea

Solution

The best solution for now :

- Create a temporary div with two spans, and CSS styles made to mimic (font, wordwrapping, scrollbars) the wrapping behavior of the textarea.

- Fill the first span with the text before the caret.

- Fill the second span with the text after the caret.

- Use the offset.top and element height of the spans to know if we're on the first line, or on the last line.

Can I see it working ?

I made a fiddle which makes it obvious how it works : http://jsbin.com/qifezupu/31/edit

How to use it :

I made a jQuery plugin : https://github.com/Canop/taliner.js

Here's the related demonstration page : http://dystroy.org/demos/taliner/demo.html

The code :

$.fn.taliner = function(){

    var $t = this,
        $d = $('<div>').appendTo('body'),
        $s1 = $('<span>').text('a').appendTo($d),
        $s2 = $('<span>').appendTo($d),
        lh =  $s1.height();

    $d.css({
        width: $t.width(),
        height: $t.height(),
        font: $t.css('font'),
        fontFamily: $t.css('fontFamily'), // for FF/linux
        fontSize: $t.css('fontSize'),
        whiteSpace : 'pre-wrap',
        wordWrap : 'break-word',
        overflowY: 'auto',
        position: 'fixed',
        bottom: 0,
        left: 0,
        padding: 0,
        zIndex: 666
    });

    var lh = $s1.height(),
        input = this[0],
        se = input.selectionEnd,
        v = input.value,
        res = {};

    $s1.text(v);
    res.linesNumber = $s1.height()/lh|0;

    $s1.text(v.slice(0, se));
    $s2.text(v.slice(se));
    res.caretOnFirstLine = input.selectionEnd===0
        || ($s1.height()<=lh && $s1.offset().top===$s2.offset().top);
    res.caretOnLastLine = $s2.height()===lh;

    $d.remove();
    return res;
}

Does it really work ?

There's still a problem. The only information we get in JavaScript regarding the caret position is `element.selectionEnd`. And this is very poor.

Here are the possible caret positions on a two lines textarea :

| A | B | C |
| D | E |

As you can see, there are more possible caret positions than inter-character positions. More specifically you have two different caret positions between the C and the D but the DOM doesn't provide any way to distinguish between them.

This means that sometimes, if you click at the right of the end of the line, the library won't be able to tell if it's the end of the line or the start of the next line.

Problem

Given a textarea with a not fixed width font, I want to know on key up if the caret (as given by `element.selectionEnd`) is in the first line or in the last line of the text. To avoid bad answers, here are some solutions which don't work: - Splitting on `\n`: A sentence can be broken in two lines, because it's too long for the textarea's width. - Measuring the text before the caret (for example by copying the text into a div with same style and measuring the height of the span): Some characters after the caret may change the wrapping point (usually between words). Here's a fiddle for the tests and to remove some ambiguity (yes, it's a `textarea` element, and it's not only one line, etc.): http://jsbin.com/qifezupu/4/edit Notes: - I don't care for Internet Explorer 9- or mobile browsers. - I need a reliable solution, working for all positions of the caret. - There are a lot of tricky details which make most ideas unusable in practice, please build a working fiddle before answering.

Original source

Related problems