どうも。
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();
どちらも少ないコード量で済むのがいいですね。
それではこの辺で