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.
code(please refer to jfiddle):
selector.setSelectionRange(carat,carat);
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
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;
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/
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.
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.
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;
}