0

私はこの電子メール用の自動提案アプリケーションを持っています。入力フィールドの外側をクリックしてからもう一度クリックすると、「onFocus」にあったものがクリアされることを除いて、すべてうまく機能します。これを防ぐ方法はありますか？ 

function suggest(inputString){
    if(inputString.length == 0) {
      $('#suggestions').fadeOut();
    } else {
    $('#email').addClass('load');
        $.post("auto.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#email').removeClass('load');
          }
      });
   }
}

 function fill(thisValue) {
    $('#email').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
}

<input type="text" id="email" onKeyUp="suggest(this.value);" onClick="fill();" />
4

1 に答える 1

1

入力ボックスをクリックするたびに、要素のonClick="fill();"呼び出しが実行されます。fill(undefined)

これが最初に行うことは、入力ボックスの値をthisValue（現在保持しているundefined）に設定することです。これにより、入力ボックスが効果的に消去されます。

これはフォーカスとは関係ありません。ボックスをクリックして値を入力してからもう一度ボックスをクリックしてみてください。最初にクリックしなくても値が消去される可能性があります。

それが価値があることについては、おそらくこれを過度に複雑にしているでしょう。ボックスをクリアするための要件は、プレースホルダーテキストを削除することだと思います。リモートで新しいブラウザを設計している場合は、HTML5placeholder="E-Mail"を使用して、ユーザーが何も入力していないときに、ブラウザに明るいテキスト（またはその他）で表示させます。

古いブラウザをサポートする必要がある場合は、これを回避する方法もあります。これは単純ですが、完璧な方法ではありません（これを一般化して、jQueryプラグインを作成するか、すでに存在するプラグインを見つけることができます）。

HTML：

<input type="text" id="email" class="placeholder" value="E-Mail" />

CSS：

.placeholder { color: #ccc; }

Javascript：

;(function($) {

  $(document).ready(function() {

    $("#email").on('focus', function() {
      var $this = $(this);
      if ($this.hasClass('placeholder')) {
        $this.removeClass('placeholder');
        $this.val('');
      }
    });

    $("#email").on('keyUp', function() {
      // this is where your key-up code goes
    });

  });
})(jQuery);
于 2013-02-15T21:41:41.530 に答える