dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] what character in text input was under cursor

  1. #1
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    397

    resolved [RESOLVED] what character in text input was under cursor

    Hello there.

    I have a text input field. The user types in something, then points the mouse over the text field somewhere and does, say, a mouse-wheel-down. I need to tell where the cursor was, in terms of characters, not pixels, over the input.

    Can something like that be done without counting on specific font dimensions?

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It is specific to the font, but it is possible to guesstimate the character if the underlying element does not contain too much text.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Oct 2007
    Location
    Vienna, Austria
    Posts
    397
    OK, I think I figured out a solution.

    1) compute the left offset of the cursor to the left edge of the text input (i.e. the x-coordinate of the cursor regarding the input field)

    2) take the text in the text field, create an absolutely positioned (but not hidden) span or other inline element, put the text into it, and place it somewhere out of the screen so the user can't see it.

    3) set the font of the span to that used in the input field

    4) keep chopping characters off the text input while its width is greater than the previously computed offset.

    5) the last chopped character is the one under the cursor.

    Update:
    I just wrote a quick and dirty implementation with jQuery. It takes the input element and the mouse event and returns the part of the text input value left of the cursor. Here it is:
    Code:
    function left_of_cursor(input, evt) {
        var x = evt.clientX - $(input).offset().left;
        var $tempspan = $('<span>').css({
            position: 'absolute',
            top: '-100px'
        }).text($(input).val());
        
        // copy any font-related CSS properties from the input to the temp span
        var input_style = getComputedStyle(input, '');
        for (var property in input_style) {
            if (property.substr(0, 4) == 'font') {
                $tempspan.css(property, input_style[property]);
            }
        }
        
        // need to have the span in the document for width to be computed
        $tempspan.appendTo($('body'));
        var text;
        while ($tempspan.width() > x) {
            text = $tempspan.text();
            $tempspan.text(
                text.substr(0, text.length-1)
            );
        }
        text = $tempspan.text();
        $tempspan.remove();
        return text;
    }
    Last edited by Sixtease; 03-31-2009 at 09:40 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles