0

ユーザーがテキスト フィールドに入力を開始すると、テキスト フィールドの右側に「クリア」ボタンが表示され、検索がリセットされます。ただし、画像はテキスト フィールド内に表示されるため、入力しすぎるとテキストが画像に隠れてしまいます。

これにより、次の 2 つの疑問が生じます。

  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);
    }
});

完全を期すために、テキスト フィールドは次のようになります。

テキストが重なっているテキスト フィールド

4

1 に答える 1

3

入力ボックスの右側にパディングを追加し、それに応じて幅を調整してみてください。

于 2012-09-14T11:36:43.390 に答える