电话号码的HTML输入类型

Question

我想知道可以使用哪种类型输入电话号码。

我可以在输入字母时输入

<input type="tel" id="phone" name="phone"  required>

此外，我想删除右侧的箭头：

<input type="number" id="phone" name="phone"  required>

我想要的是仅键入电话号码的输入。

Answer 1

使用tel可以添加一些验证以仅允许数字（您也可以预先添加+并包括所需的任何国家/地区代码）。

<form>
  <input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}" required>
  <button>Submit</button>
</form>

这将在您提交时显示错误

或者您可以通过以下方式限制数字并隐藏箭头：

.no-arrow {
  -moz-appearance: textfield;
}
.no-arrow::-webkit-inner-spin-button {
  display: none;
}
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<form>
  <input id="phone" name="phone" class="no-arrow" value="" type="number">
  <button>Submit</button>
</form>

Answer 2

以上所有解决方案都没有避免用户在您的输入中添加非数字，例如，当您在<input />标签上设置模式属性时，用户可以输入非数字char，但是当用户提交表单时会出现浏览器错误

如果您只想限制输入的数量，则必须使用 js

<块引用>

纯Js

const inputValidation = (e) => {
 
    // get value form event
     const value = e.target.value

    // validate value
    const validatedValue = value.replace(/[^0-9]/g, '');

    return validatedValue;


}

<块引用>

React JS

// Implement your input state
const [mobile, setMobile] = React.useState("");


// validate value
const numberHandler = val => {
        const validatedValue = val.replace(/[^0-9]/g, "");
        setMobile(validatedValue);
 };

您的输入标签

 return (
    <div>
     <input type="tel" value={mobile} onChange={e => numberHandler(e)} />
    </div>

  )

此外，如果用户输入无效数据，您可以向用户显示警报

const numberHandler = val => {
        const validatedValue = val.replace(/[^0-9]/g, "");
          
      + // implement alert
      +  if (validatedValue === "" && val !== "") {
      +    alert('you must enter number only')
      +    return
      +  }
        setMobile(validatedValue);
 };

Answer 3

如果仅通过删除箭头即可解决问题，则可以尝试包括CSS来禁用它：

#phone::-webkit-inner-spin-button, 
#phone::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

我建议使用此js库来格式化输入字段：

tel input js