HTML 表格中的联系电话

Question

如果我们在输入中使用“tel”，那么我们可以为输入指定最大或最小长度，但它的缺点是它可能需要所有类型的输入，无论是数字还是字母，

如果我们使用“数字”作为输入，那么它只需要数字，但我们不能给它最小-最大字符数限制。

尽管我在里面提到了模式但没有改变。那么是否有任何替代方法可以给出最大最小长度并且只能采用数字？

<div class="form-group">
    <label for="exampleFormControlInput3">Mobile Number</label>
        <div class="input-group">
           <span class="input-group-text" id="basic-addon1">+91</span>
               <input type="tel" class="form-control" id="exampleFormControlInput3" maxlength="10" placeholder="012-345-6789" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
        </div> 
 </div>

注意：我已经使用了 bootstrap5。

Answer 1

您使用输入类型 tel，如果您想避免完全是字母字符，可以与 javascript 混合使用。类型 tel 提供模式，但随后会验证。并非所有浏览器都支持。

<label for="phone">Enter your phone number:</label>

<input type="tel" id="phone" name="phone"
       maxlength ="6"
       pattern="[0-9]{3}-[0-9]{3}"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '');"
       required>

<small>Format: 123-456</small>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Answer 2

语义上使用 type="number" 是不正确的。您应该只使用 type='tel'。如果你想很好地控制用户输入的内容，你应该为此使用一个模式。

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

阅读此文档，https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

HTML 表格中的联系电话

Contact number in HTML Form

html

css

contact-form

bootstrap-5