Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/83.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在文本区域的末尾设置光标?_Javascript_Html_Firefox_Textarea - Fatal编程技术网

Javascript 如何在文本区域的末尾设置光标?

Javascript 如何在文本区域的末尾设置光标?,javascript,html,firefox,textarea,Javascript,Html,Firefox,Textarea,是否有办法将光标设置在textarea元素的末尾?我使用的是Firefox 3.6,我不需要它在IE或Chrome中工作。这里的所有相关答案似乎都使用了onfocus()事件,这似乎是无用的,因为当用户单击textarea元素中的任何位置时,Firefox会将光标位置设置到那里。我有一个长文本要显示在textarea中,这样它就可以显示最后一部分(便于在末尾添加内容) 没有框架或库 var t = /* get textbox element */ ; t.onfocus = function

是否有办法将光标设置在
textarea
元素的末尾?我使用的是Firefox 3.6,我不需要它在IE或Chrome中工作。这里的所有相关答案似乎都使用了
onfocus()
事件,这似乎是无用的,因为当用户单击
textarea
元素中的任何位置时,Firefox会将光标位置设置到那里。我有一个长文本要显示在
textarea
中,这样它就可以显示最后一部分(便于在末尾添加内容)

没有框架或库

var t = /* get textbox element */ ;

t.onfocus = function () { 
    t.scrollTop = t.scrollHeight; 
    setTimeout(function(){ 
      t.select(); 
      t.selectionStart = t.selectionEnd; 
    }, 10); 
}

诀窍是在浏览器处理完焦点事件后,使用setTimeout更改文本插入(carat)位置;否则,位置将由我们的脚本设置,然后通过浏览器立即设置为其他位置。

可能有多种方法,例如:

element.focus();
element.setSelectionRange(element.value.length,element.value.length);

我已经很久没有使用javascript而没有首先查看jQuery解决方案了

也就是说,使用javascript的最佳方法是在textarea进入焦点时获取其当前的值,并将textarea的值设置为获取的值。这在jQuery中始终起作用,如下所示:

$('textarea').focus(function() {
    var theVal = $(this).val();
    $(this).val(theVal);
});
在纯javascript中:

var theArea = document.getElementByName('[textareaname]');

theArea.onFocus = function(){
    var theVal = theArea.value;
    theArea.value = theVal;
}

我可能错了。有点生疏。

这里有一个函数

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();
    }
}

@Dr.Molle答案是正确的。为了增强功能,U可以与prevent default结合使用

样本:

document.getElementById("textarea").addEventListener("mousedown", e => {
  e.preventDefault();
  moveToEnd(e.target);
});
function moveToEnd(element) {
  element.focus();
  element.setSelectionRange(element.value.length, element.value.length);
}

我喜欢这个解决方案,因为它只有两行代码,但我认为它比Starx解决方案更需要大量的工作。
(this.jQuery || this.Zepto).fn.focusEnd = function () {
    return this.each(function () {
        var val = this.value;
        this.focus();
        this.value = '';
        this.value = val;
    });
};
document.getElementById("textarea").addEventListener("mousedown", e => {
  e.preventDefault();
  moveToEnd(e.target);
});
function moveToEnd(element) {
  element.focus();
  element.setSelectionRange(element.value.length, element.value.length);
}