Javascript 如何在文本区域的末尾设置光标？（通过不使用 jQuery）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10158190/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set cursor at the end in a TEXTAREA? (by not using jQuery)
提问by Brian Hawk
Is there a way to set the cursor at the end in a TEXTAREA tag? I'm using Firefox 3.6 and I don't need it to work in IE or Chrome. JavaScript is ok but it seems all the related answers in here use onfocus() event, which seems to be useless because when user clicks on anywhere within textarea, Firefox sets cursor position to there. I have a long text to display in a textarea so that it displays the last portion (making it easier to add something at the end).
有没有办法在 TEXTAREA 标签的末尾设置光标？我使用的是 Firefox 3.6，我不需要它在 IE 或 Chrome 中工作。JavaScript 没问题，但似乎这里的所有相关答案都使用 onfocus() 事件，这似乎没用，因为当用户点击 textarea 中的任何地方时，Firefox 会将光标位置设置到那里。我有一个长文本要显示在 textarea 中，以便它显示最后一部分（使其更容易在最后添加一些内容）。
回答by Dr.Molle
There may be many ways, e.g.
可能有很多方法，例如
element.focus();
element.setSelectionRange(element.value.length,element.value.length);
回答by Lazerblade
It's been a long time since I used javascript without first looking at a jQuery solution...
自从我在没有首先查看 jQuery 解决方案的情况下使用 javascript 以来，已经有很长时间了......
That being said, your best approach using javascript would be to grab the value currently in the textarea when it comes into focus and set the value of the textarea to the grabbed value. This always works in jQuery as:
话虽如此，使用 javascript 的最佳方法是在 textarea 成为焦点时抓取当前在 textarea 中的值，并将 textarea 的值设置为抓取的值。这在 jQuery 中始终有效，因为：
$('textarea').focus(function() {
var theVal = $(this).val();
$(this).val(theVal);
});
In plain javascript:
在普通的javascript中：
var theArea = document.getElementByName('[textareaname]');
theArea.onFocus = function(){
var theVal = theArea.value;
theArea.value = theVal;
}
I could be wrong. Bit rusty.
我可能是错的。有点生锈。
回答by Starx
Here is a function for that
这是一个函数
function moveCaretToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
回答by kennebec
textarea.focus()
textarea.value+=' ';//adds a space at the end, scrolls it into view
回答by Dagg Nabbit
var t = /* get textbox element */ ;
t.onfocus = function () {
t.scrollTop = t.scrollHeight;
setTimeout(function(){
t.select();
t.selectionStart = t.selectionEnd;
}, 10);
}
The trick is using the setTimeout to change the text insertion (carat) position afterthe browser is done handling the focus event; otherwise the position would be set by our script and then immediately set to something else by the browser.
诀窍是在浏览器处理完焦点事件后使用 setTimeout 更改文本插入（克拉）位置；否则位置将由我们的脚本设置，然后立即由浏览器设置为其他内容。
回答by yckart
(this.jQuery || this.Zepto).fn.focusEnd = function () {
return this.each(function () {
var val = this.value;
this.focus();
this.value = '';
this.value = val;
});
};
回答by xdeepakv
@Dr.Molle answer is right. just for enhancement, U can combine with prevent-default.
@Dr.Molle 回答是对的。只是为了增强，U 可以与 prevent-default 结合。
Sample:
样本：
document.getElementById("textarea").addEventListener("mousedown", e => {
e.preventDefault();
moveToEnd(e.target);
});
function moveToEnd(element) {
element.focus();
element.setSelectionRange(element.value.length, element.value.length);
}
