<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, "");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.