1

私はJavascript（およびjQuery）を初めて使用します。私のJSFiddleは、問題を可能な限り最善の方法で示しています。http://jsfiddle.net/mkLsr/3/

ユーザーがクリックせずに入力できるように、ページの読み込みに焦点を当てた検索ボックスのテキスト入力を作成しようとしています。ただし、ユーザーがテキスト入力をクリックすると消え、何も書かずにテキストフィールドからクリックすると再表示されるデフォルトのテキストも必要です。

問題は、ページに他のテキスト入力があることです。現在実行中の場合、ユーザーが1つをクリックして入力を開始すると、フォーカスは元のフォーカスされたテキスト入力にジャンプします。どうすればこれを防ぐことができますか？

if ($('input:focus').size() == 0)他のフォーカスが設定されていない場合にのみフォーカスが設定されるように、を使用して作成してみました。ページの読み込み後に再チェックされないため、機能しませんか？どうすれば再チェックできますか、それとも他に問題がありますか？

自動的に入力できる検索ボックスは、入力時に消去されるデフォルトのテキストを使用して、できる限りユーザーフレンドリーだと思いますが、他の入力のユーザーに費用をかけずにそれを実行したいと思っています-親しみやすさ。

どんな助けでもいただければ幸いです！

*編集*

Kaiは、彼のJavascriptソリューションと「プレースホルダー」HTML属性の使用について本当に助けてくれました。（http://jsfiddle.net/wgwTC/4/）。

最初のテキスト入力がまだフォーカスされているようにクロスブラウザを適用する方法を誰かが知っているかどうかだけ知りたいのですが、ページをロードするとプレースホルダーテキストがそこにあります。現在、Chromeで動作しますが、IE（9を使用しています）またはFirefox（5.0）では動作しません。クロスブラウザソリューションがある場合、それは将来のプロジェクトで同じまたは同様の機能を必要とする他の人を助けるかもしれません。

4

2 に答える 2

1

placeholder属性を使用するが、IE <= 9 の場合は JS にフォールバックするソリューションを次に示します (実際の例については、 http://jsfiddle.net/wgwTC/2/を参照してください)。

// Focus on this box by default
$('#header-search-box').focus();

// Support placeholder text for IE <= 9 (which doesn't support placeholder attribute)
if ( $.browser.msie && (parseInt($.browser.version, 10) <= 9) ) {
    $('input[name=search]').attr('value', 'Search New Equipment...');

    // Set placeholder text on blur
    $('input[name=search]').on('blur', function (e) {
        if (!e.currentTarget.value.length) {
            e.currentTarget.value = 'Search New Equipment...';
        }
    });    

    // Clear placeholder text on focus
    $('input[name=search]').on('focus', function (e) {
        if (e.currentTarget.value === 'Search New Equipment...') {
            e.currentTarget.value = '';
        }
    });
}
于 2012-06-13T18:52:16.703 に答える
0

これはあなたが求めていることだと思います（私があなたを正しく理解していると仮定して）。

これがフィドルです：http://jsfiddle.net/jVvX3/2/

于 2012-06-13T18:56:19.867 に答える