WP

ブラウザのスクロール位置

// JavaScript
document.documentElement.scrollTop || document.body.scrollTop;
// JQuery
$(window).scrollTop();

高さ（padding, border 含む）

// Javascript
element.offsetHeight;
// Jquery
element.outerHeight();

input 要素にハイフン無しの郵便番号の入力があった場合、ハイフンを補完する JavaScript 。

input 要素がひとつの場合

HTML

<input type="text" name="zip">

JavaScript

document.querySelector('input[name=zip]').addEventListener('keyup', function() {
  this.value = this.value.replace(/(\d{3})(\d{4})/, '$1-$2');
});

上記でキーボードがタイプされる都度、input 要素の value 属性が7桁の数字だったらハイフンを補完する。

しかし、このままだと input 要素に 7 桁の数字をコピペした時に反応しないので、以下のように input 要素にもう一つイベントを登録する。

JavaScript

document.querySelector('input[name=zip]').addEventListener('keyup', function() {
  this.value = this.value.replace(/(\d{3})(\d{4})/, '$1-$2');
});

document.querySelector('input[name=zip]').addEventListener('change', function() {
  this.value = this.value.replace(/(\d{3})(\d{4})/, '$1-$2');
});

同じことを二回書いてるだけだけど、まとめたかったら関数にしてしまう。

JavaScript

document.querySelector('input[name=zip]').addEventListener('keyup', setZip);
document.querySelector('input[name=zip]').addEventListener('change', setZip);

function setZip()
{
  this.value = this.value.replace(/(\d{3})(\d{4})/, '$1-$2');
}

input 要素が複数の場合

HTML

<input type="text" name="zip1">
<input type="text" name="zip2">

JavaScript

var zip = document.querySelectorAll('input[name^=zip');

for (var i = 0; i < zip.length; i++) {
  zip[i].addEventListener('keyup', setZip);
  zip[i].addEventListener('change', setZip);
}

function setZip()
{
  this.value = this.value.replace(/(\d{3})(\d{4})/, '$1-$2');
}

input 要素に同一のクラス名、例えば「class=”zip”」を付与していれば、「querySelectorAll(‘input[name^=zip’)」は「querySelectorAll(‘.zip’)」としてもよい。

JQuery

JQuery を読み込んでいたら、以下で終了。

// input 要素がひとつ
$('input[name=zip]').on('keyup change', function() {
  $(this).val($(this).val().replace(/(\d{3})(\d{4})/, '$1-$2'));
});

// input 要素が複数
$('input[name^=zip').on('keyup change', function() {
  $(this).val($(this).val().replace(/(\d{3})(\d{4})/, '$1-$2'));
});

// input 要素に共通のクラス名
$('.zip').on('keyup change', function() {
  $(this).val($(this).val().replace(/(\d{3})(\d{4})/, '$1-$2'));
});

JQuery や他のライブラリ等を使うか、素のJavaScript のみで書くかは、臨機応変で。

リンク

this – JavaScript | MDN#DOM イベントハンドラとして