Javascript 如何移动窄输入元素中的可见文本以在末尾看到光标？_Javascript_Html_Firefox_W3c

Javascript 如何移动窄输入元素中的可见文本以在末尾看到光标？

javascript html firefox

Javascript 如何移动窄输入元素中的可见文本以在末尾看到光标？,javascript,html,firefox,w3c,Javascript,Html,Firefox,W3c,我遇到的问题是，给定一个输入元素的maxlength比元素的宽度宽得多（按照其样式设置），并且给定一个比元素的宽度宽的值，我如何使元素“滚动”到文本的末尾。在IE中，很简单，我创建一个textRange对象，将其开始和结束位置放在文本的末尾，在该范围上调用select，然后bam，光标放在文本的末尾，文本被移动，以便显示结尾。在Firefox、Chrome、Safari中，尝试使用输入元素的setSelectionRange将光标设置在正确的位置，但文本不会移动，以便我看到它的结束，而是开始。有

我遇到的问题是，给定一个输入元素的maxlength比元素的宽度宽得多（按照其样式设置），并且给定一个比元素的宽度宽的值，我如何使元素“滚动”到文本的末尾。在IE中，很简单，我创建一个textRange对象，将其开始和结束位置放在文本的末尾，在该范围上调用select，然后bam，光标放在文本的末尾，文本被移动，以便显示结尾。在Firefox、Chrome、Safari中，尝试使用输入元素的setSelectionRange将光标设置在正确的位置，但文本不会移动，以便我看到它的结束，而是开始。有人知道我可以用什么方法把光标放在文本的末尾，然后移动文本，这样我就可以看到光标了吗

谢谢大家!

谢恩


输入光标位置
函数setCursor（）
{
var objInput=document.getElementById（'testinputbox'）；
var nLength=objInput.value.length；
objInput.focus（）；
对象输入设置选择范围（NLENGHT，NLENGHT）；
}

我怀疑这是一个很好的跨浏览器解决方案，但在Firefox中似乎确实是一个解决方案。我最初是通过模拟右箭头键来尝试的，但没有任何运气

function setCursor(id)
{
    var elem = document.getElementById(id);

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

    // Trigger a "space" keypress.
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
    elem.dispatchEvent(evt);

    // Trigger a "backspace" keypress.
    evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
    elem.dispatchEvent(evt);
}

有关initKeyEvent的更多信息。

这是一个难题，但它可以工作：

编辑：为实际工作做进一步的调整：

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
function setatend() {
    var save = document.getElementById("mytextbox").value;
    mytextbox.focus(); 
    mytextbox.value = save; 
}
function setfocus() {
    var box = document.getElementById("mytextbox");
    box.focus();    
}
</script>
  </head>
      <body onload='setfocus();'>
    <input onfocus='setatend();' id='mytextbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>


输入光标位置
函数setatend（）{
var save=document.getElementById（“mytextbox”）.value；
mytextbox.focus（）；
mytextbox.value=保存；
}
函数setfocus（）{
var-box=document.getElementById（“mytextbox”）；
box.focus（）；
}

您需要缩进代码4空格以获得正确的格式。这种方法是我最初的解决方案，它确实将光标放在了末尾，但它没有像我希望的那样移动内容。非常感谢！通过进一步的乱七八糟修正了它。非常感谢这一次，这对我来说就像在Firefox中一样有效，现在是时候让我想想如何让Safari/Chrome符合我的意愿了！再次感谢！看见1）

initKeyEvent

现在已不推荐使用。2）似乎你可以在设置焦点（不需要空格+退格）后再做

新键盘事件（'keypress'）

。这是遥远的未来，两千年。我们是网络开发者。自从90年代末HTML4规范问世以来，世界已经大不相同了。我们不再使用。相反，我们使用.，适用于，也适用于。至少对铬来说是这样。

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
function setatend() {
    var save = document.getElementById("mytextbox").value;
    mytextbox.focus(); 
    mytextbox.value = save; 
}
function setfocus() {
    var box = document.getElementById("mytextbox");
    box.focus();    
}
</script>
  </head>
      <body onload='setfocus();'>
    <input onfocus='setatend();' id='mytextbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>