VS Code で JavaScript の圧縮・軽量化する機能拡張「JS & CSS Minifier」（非推奨だけど使える）の変わりは、「JS Minify & Obfuscator」がよさげ。
https://marketplace.visualstudio.com/items?itemName=themebetter.jsminifyobfuscator
「JS & CSS Minifier」から他の機能拡張に乗り換えられない大きな理由だった「保存場所」の指定ができる。
"jsMinifyObfuscator.watchFolders": {
// "src": "dist"
// "src/js": "../dist"
// "src/js": "../../dist"
},// JavaScript
document.documentElement.scrollTop || document.body.scrollTop;
// JQuery
$(window).scrollTop();// Javascript
element.offsetHeight;
// Jquery
element.outerHeight();input 要素にハイフン無しの郵便番号の入力があった場合、ハイフンを補完する JavaScript 。
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');
}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 を読み込んでいたら、以下で終了。
// 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 のみで書くかは、臨機応変で。