頭の中は異空間

ものづくり中心

JSでmaxlength, スクロールメニューの挙動を実装

どうも。

 

JSで、HTML5の便利機能maxlengthを指定できるようにしました。でもクロスブラウザの対応すると、一部というか古いIEだと対応してなくて設定しても意味ねーし!ってことになることもあるでしょう。いい加減最新版使えよ、って思うところですがしっかりとそこをカバーするためのコードをJSで実装してみます。

 


maxlength

・定義側    
$.fn.extend({
  maxlength: function() {
    var $this = $(this);

    var ml = $this.attr("maxlength");

    if (!ml.match(/^[1-9]([0-9]+)?/)) {
      return;
    }

    $this.keydown(function() {
      var number = Number(ml);
      var length = $this.val().length;
      if (length > number - 1) {
        var val = $this.val().substr(0, length - 1);
        $this.val(val);
      }
    });
  }
});

・呼び出し側
$("#test").maxlength();

maxlengthは通常通りHTMLの属性として追加すればいいです。楽勝ですね♪

 

そしてこちらではサイドバーなどを画面上でスクロールさせたい時の挙動をJSで書いてみます。speedの値を変えれば速度を変化させれます。スクロール値を動的に取得してtopとの差分を計算して、ちょうど良い位置まで移動してくれます。

scroll menu

・定義
var scrollMenu = function() {
  var speed = 50;
  var $menu = $('#sidemenu');
  var offset = $menu.offset().top;

  $(window).on("scroll", function() {
    if ($(window).scrollTop() > offset) {
      $menu.animate({marginTop: $(window).scrollTop() - offset}, speed);
    } else {
      $menu.animate({marginTop: 0}, speed);
    }
  });
};


・呼び出し側
scrollMenu();

 

どちらも少ないコード量で済むのがいいですね。

 

それではこの辺で