Using jQuery selector and setSelectionRange is not a function

Question

I have assembled a basic jfiddle below. For some reason my selector works to retrieve the textarea box to set the value, but the selector doesnt work to use the setSelectionRange function. On the console you'll find an error for .setSelectionRange is not a function.

http://jsfiddle.net/dMdHQ/6/

code(please refer to jfiddle): selector.setSelectionRange(carat,carat);

Vinia

Answer 1

setSelectionRange(carat,carat) is not a method on jquery object. You want to use it on DOM element. So try:

selector[0].setSelectionRange(carat,carat); //use `[0]` or .get(0) on the jquery object

See Reference

Fiddle

Walther

Please mark the answer as the correct answer if it solves your question – Nephrotomy

i still get 'selector.setSelectionRange is not a function' even in fiddle. I am using chrome. – Phoebephoebus

Answer 2

For me this is a good solution

selector[0].setSelectionRange(start ,end); 

But I would like to add one more thing. I noticed that setSelectionRange is something that becomes available asynchronously after the element gets focus.

var element = selector[0];
element.addEventListener('focus', function() {
   element.setSelectionRange(start, end); 
});
element.focus();

Also you can use alternatively:

element.selectionStart = start;
element.selectionEnd = end;

Blindstory

Answer 3

HTML:

<input type="search" value="Potato Pancakes" id="search">

JQUERY:

jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {

    $(this).focus()

    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;

      this.setSelectionRange(len, len);

    } else {
    // ... otherwise replace the contents with itself
    // (Doesn't work in Google Chrome)

      $(this).val($(this).val());

    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;

  });

};

$("#search").putCursorAtEnd();

Check:

http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/

Zolnay

Answer 4

element[0].setSelectionRange(99999,99999);
element[0].focus();

This will set focus to the last value character. Useful, if we don't know the value.

Documentation:

selectionStart

The 0-based index of the first selected character. An index greater than the length of the element's value is treated as pointing to the end of the value.

selectionEnd

The 0-based index of the character after the last selected character. An index greater than the length of the element's value is treated as pointing to the end of the value.

Sourpuss

Answer 5

You could try this which works for me. I use it to build an address from the separate address fields and then do the copy for pasting.

The HTML

<div id="d_clip_container" style="position:relative">
    (<a href="#" id="d_clip_button">copy to clipboard</a>)
</div>;
<textarea id="clip" rows="0" cols="0" style="border:none;height:0;width:0;"></textarea>

The jQuery

    $(document).ready(function() {

        $('#d_clip_button').click(function() {
            //get all the values of needed elements
            var fName = $("#firstName").val();
            var lName = $("#lastName").val();
            var address = $("#Address").val();
            var city = $("#City").val();
            var state = $("#State").val();
            var zip = $("#Zip").val();
            //concatenate and set "clip" field with needed content
            $('#clip').val(fName + " " + lName + "\n" + address + "\n" + city + ", " + state + " " + zip);

            //Do it
            if(copyToClipboard('#clip')) {
                alert('text copied');
            } else {
                alert('copy failed');
            }
        });
    });

    function copyToClipboard(elem) {
        // set focus to hidden element and select the content
        $(elem).focus();
        // select all the text therein  
        $(elem).select();

        var succeed;
        try {
            succeed = document.execCommand("copy");
        } catch(e) {
            succeed = false;
        }

        // clear temporary content
        $(target).val('');

        return succeed;
    }       

Mastaba