在到達結尾之前使文本輸入滾動

Question

這就是我已有的內容：當用戶開始在文本字段中輸入內容時，文本字段右側會出現一個「清除」按鈕，用於重置搜索。但是，由於圖像出現在文本字段中，因此如果您碰巧輸入了足夠多的文字，圖像就會變得模糊不清。

這就產生了兩個問題：

1. 有沒有辦法讓文本字段開始滾動可以是文本達到一定數目的像素，還是有一定數目的字符後（大概是爲了開始之前滾動到達清除按鈕）？
2. 我該怎麼辦？有沒有更好的方法來達到預期的效果？我的意思是我可以保留原文，只是希望沒有人真的需要輸入那麼多字符，但我不能真正做出這樣的假設，我不想強​​迫他們進入文本限制（因爲可搜索的領域可能相當大），我是一個細節的堅持者，所以這個小小的東西真的讓我厭煩。

我有以下HTML：

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

而且下面的JavaScript（jQuery的）：

$('#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

嘗試在輸入框右側添加填充並相應地調整寬度。