51歳からのプログラミング 備忘 吹き出し的なもの

吹き出し的なもの（以下、吹き出しという）を作ってみた。

入力欄を空欄で入力した時に、
吹き出しで「未入力です」ってアナウンスが
フェードインして入る、って感じで。

・　吹き出しを、cssで用意
・　吹き出しのcssは、<input　の後の　<span　に設定
・　吹き出しのcssは、最初は非表示にしとく(display:none)
・　吹き出したいときに、表示する（ここでは、submit時）

そんな感じで作れそうだったので作った。

表示位置の設定と、フェードインアウト,
入力時には非表示状態、をコードしてるので、
ちょっと長いのが残念。

完成コードはこれ
でも、吹き出しをフェードアウトさせるところが気に入らない。いつか直そう。

//------- jquery ----------
<script>
  $(function(){
    var position,width;
    var $form=$('form');
    var $inp =$('input[name="inp"]');
    var $sp  =$('span[name="sp"]');

    $form.submit(function(){
      if(!$inp.val()){
        position=$inp.offset();
        width   =$inp.width();
        $sp.text('未入力です');
        $sp.css('display','inline');
        $sp.offset({top :(position.top-1),
                    left:(position.left+width+10),
                  });
        $sp.hide().fadeIn(100);
        return false;
      }
    });

    $inp.on('keypress',function(){
      $sp.fadeOut(100);
    });
  });
</script>
//----------------------------


//---------- css -------------
<style>
  .tip    {display:none;
           color:white;
           background:blue;
           border-radius:5px;
           }
</style>
//----------------------------


//--------- html -------------
<form action="test" method="post">
  {{csrf_field()}}　// これはlaravel仕様です
  <input name="inp">
　<span name="sp" class="tip"></span>
</form>

コードを打つだけで楽しい。
心が躍るような楽しさ。
こんな楽しいことがあったんだ。