Question

我有一个图像选择器，可以从图库中选择图像，然后将URL填入<input type="text">字段。 URL可能非常长，并且始终在文本字段中看到URL的前半部分的信息值非常小。

有人知道一种“滚动”到文本字段右侧的方法，以便URL的末尾可见而不是开头吗？没有诉诸文本区域。

Answer 1

除IE6-8 / Opera

以外的所有浏览器

在明确设置focus()后，将HTMLInputElement.setSelectionRange()设置为输入值的长度。缺点是它一旦模糊就会向后滚动。

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);

<input id="foo">

除IE / Opera

之外的所有浏览器

如果您不完全关心IE，请将Element.scrollLeft设置为Element.scrollWidth。缺点是浏览器支持较少。

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";
foo.scrollLeft = foo.scrollWidth;

<input id="foo">

所有浏览器

如果您想支持每一个浏览器，请考虑使用您设置为dir（从右到左）的rtl（方向）属性来欺骗它。缺点是它是一个黑客，当它可编辑和/或你开发一个方向敏感的网站时真的需要考虑，但这适用于所有浏览器，并且非常适合只读输入。

var foo = document.getElementById("foo");
foo.value = "http://stackoverflow.com/questions/1962168/scroll-to-the-very-right-of-a-long-text-input";

<input id="foo" dir="rtl">

Answer 2

Lucman Abdulrachman的答案是最好的，但我不能赞成它，所以我在不使用jQuery的情况下添加另一个解决方案：

var elem = document.getElementById('myInput');
elem.focus();
elem.scrollLeft = elem.scrollWidth;

Answer 3

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;

Answer 4

你可以简单地将CSS属性direction设置为“rtl”（从右到左），不需要JS。这将改变滚动方向以及文本对齐，因此当文本短于输入的大小时可能看起来很奇怪，但是，假设输入将始终包含长URL，那么它应该是一个问题。

<input type="text" value="short url" size="20">
<br>
<input type="text" value="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" size="20">

 # /etc/nginx/sites-available/k2cloud_staging

upstream puma_k2cloud_staging {
  server unix:/home/outracoisa/k2cloud/shared/tmp/sockets/puma.sock fail_timeout=0;
}

server {
  listen 8080;

  client_max_body_size 4G;
  keepalive_timeout 10;

  error_page 500 502 504 /500.html;
  error_page 503 @503;

  server_name contoso.com www.contoso.com contoso.com.br www.contoso.com.br contoso.sapo.pt www.contoso.sapo.pt;
  root /home/outracoisa/k2cloud/current/public;
  try_files $uri/index.html $uri @puma_k2cloud_staging;


  if ($host ~* www\.(.*)) {
    set $host_without_www $1;
    rewrite ^(.*)$ http://$host_without_www$1 permanent;
  }



  rewrite ^/rio/?$ http://contoso.com/rio/pt-BR permanent;
  rewrite ^/lisboa/?$ http://contoso.sapo.pt/lisboa/pt-PT permanent;

  if ($host ~ contoso.com(\.br)) {
    rewrite ^/?$ http://contoso.com/rio/pt-BR permanent;
  }

  if ($host = contoso.sapo.pt) {
    rewrite ^/?$ http://contoso.sapo.pt/lisboa/pt-PT permanent;
  }



  location ~ ^/(rio|lisboa) {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;


    proxy_pass http://puma_k2cloud_staging;
    # limit_req zone=one;
    access_log /home/outracoisa/k2cloud/shared/log/nginx.access.log;
    error_log /home/outracoisa/k2cloud/shared/log/nginx.error.log;
}

########## Ramos #####
 if ($scheme != "https") {
        set $a x;
}

if ($host = contoso.sapo.pt) {
        set $a "${a}y";
}
if ($a = xy) {
    rewrite ^(.*) https://$host$1 permanent;
        break;
        }

################



  location ^~ /assets/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }

  location = /50x.html {
    root html;
  }

  location = /404.html {
    root html;
  }

  location @503 {
    error_page 405 = /system/maintenance.html;
    if (-f $document_root/system/maintenance.html) {
      rewrite ^(.*)$ /system/maintenance.html break;
    }
    rewrite ^(.*)$ /503.html break;
  }

  if ($request_method !~ ^(GET|HEAD|PUT|PATCH|POST|DELETE|OPTIONS)$ ){
    return 405;
  }

  if (-f $document_root/system/maintenance.html) {
    return 503;
  }

  location ~ \.(php|html)$ {
    return 405;
  }
}

我希望这会有所帮助。

Answer 5

更好的解决方案是使输入足够大以查看最合理的长度网址。输入的默认宽度通常很短。通过减小字体大小和增加宽度（可能增加一定百分比来填充可用空间），您可能会将URL设置为长于或长于浏览器的URL栏，可见。你并不需要一个非常大的文本用于网址，因为你可能只是验证它看起来合理，而不是阅读它。

如果能够查看整个网址，则相对较大的字体很重要（如果用户需要是高级用户，并且可能会手动编辑网址），则应使用文本区域进行调整。网址随机自动换行看起来有点奇怪，但只要你不插入空格，网址应该仍然有效。

如果您的网络服务器负责生成网址，您可以尝试减少详细信息。如果您可以使用相对URL（跳过域部分），您还可以节省空间。

“滚动”到长文本输入的右侧

5 个答案:

除IE6-8 / Opera

除IE / Opera

所有浏览器