<label for="tel">電話番号(OKパターン)</label>
<input type="tel" inputmode="numeric" name="tel" id="tel" maxlength="20" required placeholder="01234567890" pattern="^[\x00-\x7F]+$" title="数字とハイフンのみを入力してください">
<label for="tel2">電話番号(NGパターン)</label>
<input type="number" inputmode="numeric" name="tel2" id="tel2" maxlength="20" required placeholder="01234567890" pattern="^[\x00-\x7F]+$" title="数字とハイフンのみを入力してください">
label{
display: block;
font-size: 20px;
font-weight: bold;
}
input{
font-size: 20px;
padding: 0.4rem 0;
margin-bottom: 30px;
}
document.getElementById("tel").addEventListener("input", function (e) {
e.target.value = e.target.value.replace(/[^0-90-9ー-]/g, "");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.