在到达终点之前使文本输入滚动

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

尝试在输入框右侧添加内边距并相应调整宽度。