[英]Using jQuery selector and setSelectionRange is not a function
I have assembled a basic jfiddle below. 我已经在下面组装了一个基本的jfiddle。 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. 由于某种原因,我的选择器用于检索textarea框以设置值,但选择器不能使用setSelectionRange函数。 On the console you'll find an error for .setSelectionRange is not a function. 在控制台上,你会发现.setSelectionRange不是函数的错误。
http://jsfiddle.net/dMdHQ/6/ http://jsfiddle.net/dMdHQ/6/
code(please refer to jfiddle): selector.setSelectionRange(carat,carat);
代码(请参考jfiddle): selector.setSelectionRange(carat,carat);
HTML: HTML:
<input type="search" value="Potato Pancakes" id="search">
JQUERY: 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/ http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
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. 我注意到setSelectionRange
是元素获得焦点后异步可用的东西。
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;
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 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 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.