divツールチップを作成しようとしましたが、機能が失敗しました。文を返さない

Question

キー入力が数字か "スラッシュ"かどうかを確認しようとしています。しかし、関数がreturn false;にはないツールチップを作成し始めるとき。また、ツールチップを作成するとき、彼は入力位置ではなくページの左上隅にあります。これをどうすれば解決できますか？

$(document).ready(function() { 
    $('.groupOfTexbox').keypress(function(event) { 
     return isNumber(event) 
    }); 

    var $tooltip = $('<div style="display:none;position:absolute;padding:10px;background:rgba(0,0,0,0.5);"></div>').appendTo(document.body); 

    function isNumber(evt) { 
     var charCode = evt.which; 

     if ((charCode != 47) && (charCode < 48 || charCode > 57)) { 
      $tooltip.text($(this).data('tooltip')); 
      $tooltip.show().css({ 
       top: 0, 
       left: 0 
      }); 
      var test = $('groupOfTexbox'); 
      var calculator = new $.PositionCalculator({ 
       item: $tooltip, 
       itemAt: "bottom left", 
       target: test, 
       targetAt: "top left", 
       flip: "both" 
      }); 
      var posResult = calculator.calculate(); 

      $tooltip.css({ 
       top: posResult.moveBy.y + "px", 
       left: posResult.moveBy.x + "px" 
      }); 

      return false; 
     } else { 
      return true; 
     } 
    } 
}); 

<input type="text" class="groupOfTexbox" data-tooltip="Hello" /> 

Answer 1

あなたのロジックの問題のカップルを持っています。まず、匿名関数ハンドラからisNumber()メソッドを呼び出します。thisのスコープはwindowであり、入力されたinputではありません。これを行うには、関数の参照をハンドラーに提供する必要があります。次に、エントリが有効でない場合、キー・プレス・イベントを停止するには、evt.preventDefault()を使用する必要があります。そこから、inputのoffset()を使用して、必要に応じてツールチップを配置することができます。あなたはテンキーが同様の数字を入力できるようにしたい場合は、あなたがthis questionごとに、同様のキーコードに105から96を許可する必要があり

$('.groupOfTexbox').keypress(isNumber); 

var $tooltip = $('<div style="display: none; position: absolute; padding: 10px; background: rgba(0,0,0,0.5);"></div>').appendTo(document.body); 

function isNumber(evt) { 
    var charCode = evt.which; 
    var $input = $(this); 
    if (charCode < 47 || charCode > 57) { 
     evt.preventDefault(); 
     $tooltip.text($input.data('tooltip')).show().css({ 
      top: $input.offset().top, 
      left: $input.offset().left + $input.width() + 10 // 10px gap 
     });    
    } 
} 

Example fiddle

：これを試してみてください。