在到达结束之前进行文本输入滚动

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

尝试在输入框的右侧添加填充并相应地调整宽度。