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

发布于 2024-07-14 23:57:19 字数 971 浏览 7 评论 0原文

我遇到的问题是，给定一个输入元素，其 maxlength 比元素的宽度（在其样式中设置）宽得多，并且给定一个比元素宽度宽的值，我怎样才能让元素“滚动”到文本末尾。在 IE 中这很容易，我创建一个 textRange 对象，将其开始和结束位置放在文本的末尾，在该范围上调用 select，然后，光标放置在文本的末尾，并且文本被移动，这样结局已显示。在 Firefox、Chrome、Safari 中，尝试使用输入元素的 setSelectionRange 将光标设置在正确的位置，但文本不会移动，以便我看到其结尾，而是开头。有谁知道我可以将光标放在文本末尾并移动文本以便我可以看到光标吗？

谢谢你！

谢恩

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
      function setCursor()
      {
         var objInput = document.getElementById( 'testinputbox' );
         var nLength = objInput.value.length;

         objInput.focus();
         objInput.setSelectionRange( nLength, nLength );
      }
    </script>
  </head>
  <body onload='setCursor();'>
    <input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

原文

The problem I am having is that given an input element with a maxlength that is much wider than the element's width (as set in its style), and, given a value that is wider than the element's width, how can I get the element to "scroll" to the end of the text. In IE it is easy, I create a textRange object, put its start and end position at the end of the text, call select on that range, and bam, the cursor is placed at the end of the text AND the text is shifted so that the end is shown. In Firefox, Chrome, Safari, trying to use the input element's setSelectionRange sets the cursor in the right position, but the text is not shifted so that I see its end, but instead the beginning. Does anybody know of a way I could go about placing the cursor at the end of the text AND shifting the text so that I can see the cursor?

Thank you!

Shane

<html>
  <head>
    <title>input cursor position</title>
    <script language='javascript'>
      function setCursor()
      {
         var objInput = document.getElementById( 'testinputbox' );
         var nLength = objInput.value.length;

         objInput.focus();
         objInput.setSelectionRange( nLength, nLength );
      }
    </script>
  </head>
  <body onload='setCursor();'>
    <input id='testinputbox' maxlength='200' value='some very very very very very long text' style='width: 100px;'></input>
  </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魂归处 2024-07-21 23:57:19

我怀疑这是否是一个出色的跨浏览器解决方案，但它似乎确实是 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 的更多信息请此处。

I doubt this is a great cross-browser solution, however it does seem to be a work around in Firefox. I originally tried it by simulating the right arrow-key press, but didn't have any luck.

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

More info on initKeyEvent here.

回复收藏 0 原文

心碎的声音 2024-07-21 23:57:19

这是一个拼凑，但它有效：

编辑：进一步拼凑以实际工作：

<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>

It is a kludge, but it works:

Edit: further kludged to actually work:

<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>

回复收藏 0 原文

请帮我爱他 2024-07-21 23:57:19

如果您只需将元素滚动到末尾，则使用：

document.querySelector('button').addEventListener('click', () => {
  const input  = document.querySelector('input');
  input.scrollLeft = input.scrollWidth - input.clientWidth;
});

<input value="start,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,end"/>
<br><br>
<button>Scroll</button>

scrollLeft - 左侧隐藏的内容，起始位置为 0px。
clientWidth - 元素可见部分的宽度。
scrollWidth - 元素可见和隐藏部分的宽度。

使用 scrollTop、clientHeight 和 scrollHeight 的垂直滚动效果相同

If You just need to scroll the element to the end then use:

document.querySelector('button').addEventListener('click', () => {
  const input  = document.querySelector('input');
  input.scrollLeft = input.scrollWidth - input.clientWidth;
});

<input value="start,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,end"/>
<br><br>
<button>Scroll</button>

scrollLeft - what's hidden on the left, 0px at start.
clientWidth - width of the visible portion of the element.
scrollWidth - width of the visible and hidden portion of the element.

Works same for vertical scroll using scrollTop, clientHeight and scrollHeight

回复收藏 0 原文

~没有更多了~