<div class="container">
<form class="h-adr">
<span class="p-country-name" style="display:none;">Japan</span>
〒<input type="text" class="p-postal-code" size="8" maxlength="8">
<label>住所
<input type="text" class="address p-region p-locality p-street-address p-extended-address" />
</label>
</form>
</div>
.container {
margin: 30px;
}
input {
font-size: 16px;
margin-bottom: 15px;
}
label {
display: block;
}
.p-region {
display: inline-block;
width: 270px;
}
document.querySelector(".p-postal-code").addEventListener(
"keyup",
function (e) {
if (this.value.toString().match(/^[0-9]{7}$/) || this.value.toString().match(/^\d{3}-?\d{4}$/)) {
document.querySelector(".address").focus();
}
},
!1
);
This Pen doesn't use any external CSS resources.