끝에 도달하기 전에 텍스트 입력 스크롤 만들기

Question

그래서 이미 있습니다. 사용자가 텍스트 필드에 입력을 시작하면 텍스트 필드의 오른쪽에 검색을 재설정하는 "지우기"버튼이 나타납니다. 그러나 텍스트 필드 내에 이미지가 나타나기 때문에 입력이 충분하면 텍스트가 이미지에서 가려지기 시작합니다. 텍스트가 픽셀의 특정 번호 또는 문자의 특정 숫자에 도달하면 (아마도 전에 스크롤을 시작하거나 스크롤 시작하는 텍스트 필드를 얻을 수있는 방법이 있나요

1. :

   이 두 가지 질문을 제기 명확한 버튼에 도달)?

2. 잘못된 길로 가고 있습니까? 원하는 효과를 얻을 수있는 더 좋은 방법이 있습니까? 나는 텍스트를 그대로두고 떠날 수 있다는 것을 의미하며, 실제로 아무도 그 많은 문자를 타이핑 할 필요가 없다고 기대하지만, 나는 그 가정을 진정으로 만들 수는 없다. 텍스트 제한을 강요하고 싶지 않다. 검색 가능한 필드는 상당히 클 수 있습니다.) 그리고이 작은 작은 것이 정말로 나를 괴롭히도록 세부 사항을 고집하는 사람입니다.

   <div id="container"> 
       <img class="clear-button" title="Clear search" src="/img/clear-button.png" 
        onclick="clearSearch();"> 
       <label for="search-filter">Find Foo: </label> 
       <input type="text" id="search-filter" /> 
       <input type="submit" id="search-filter-button" value="Search" /> 
   </div> 
   

   그리고 다음과 같은 자바 스크립트 (jQuery를) :

나는 다음과 같은 HTML이 완성도를 위해서

$('#search-filter').on('keypress', function(e) { 
    if (e.which == 13) { 
     $('#search-filter-button').click(); 
    } 

    if ($(this).val().length != 0) { 
     $('.search-clear-button').fadeIn(200); 
    } 
}); 

을,이 텍스트 필드에 모습입니다 :

Answer 1

입력 상자의 오른쪽에 패딩을 추가하고 그에 따라 너비를 조정하십시오.