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

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

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