>  기사  >  웹 프론트엔드  >  HTML에서 긴 텍스트 입력의 끝으로 스크롤하는 방법은 무엇입니까?

HTML에서 긴 텍스트 입력의 끝으로 스크롤하는 방법은 무엇입니까?

DDD
DDD원래의
2024-10-25 07:49:02245검색

How to Scroll to the End of a Long Text Input in HTML?

긴 텍스트 입력 끝으로 스크롤: 자세한 솔루션

웹 애플리케이션 세계에서는 긴 URL을 수용하는 텍스트 입력 필드를 접하는 것이 일반적입니다. 이는 URL을 위한 충분한 공간을 제공하지만 종종 URL의 시작 부분이 표시되고 더 많은 정보를 제공하는 끝 부분은 숨겨집니다.

과제:

탐색 텍스트 필드에서 이렇게 긴 URL을 통과하는 것은 지루한 작업이 됩니다. 사용자가 끝에 도달하려면 수동으로 스크롤해야 하기 때문입니다. 이러한 불편을 완화하기 위해 개발자는 URL의 맨 오른쪽으로 직접 "스크롤"할 수 있는 솔루션을 모색했습니다. 이렇게 하면 수동으로 스크롤할 필요가 없으며 URL 끝에 즉시 액세스할 수 있습니다.

답변:

다행히 HTMLInputElement.setSelectionRange() 메서드는 다음 문제에 대한 솔루션을 제공합니다. 이 도전. 입력 필드에 focus()를 명시적으로 설정하고 이후에 SelectionRange()를 입력 값의 길이로 설정하면 커서가 자동으로 URL 끝에 위치합니다.

구현:

<code class="javascript">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);</code>

참고:

이 솔루션은 IE6-8 및 Opera를 제외한 모든 브라우저에 적용 가능하다는 점에 유의하는 것이 중요합니다. 이러한 특정 브라우저에서는 입력 내용이 포커스를 잃으면 커서가 필드의 시작 부분으로 돌아갈 수 있습니다.

위 내용은 HTML에서 긴 텍스트 입력의 끝으로 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.