twitter-bootstrap - 引导表单助手电话不起作用

Question

我正在尝试使用表单 Bootstrap 框架制作网站。作为我的代码的一部分，我有

<div class="control-group">
<label class="control-label" for="inputTell">Telephone</label>
<div class="controls">
<input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">
</div>
</div>

这是图像：

不应该是这样的。它不应该接受任何字符串，它应该给我这样的电话格式：

我的目录中已经有必要的 JS 文件，但我不确定它为什么不起作用。

Answer 1

确保输入字段在表单内。否则电话助手将无法正常工作。

<form>
  <div class="control-group">
    <label class="control-label" for="inputTell">Telephone</label>
    <div class="controls">
      <input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">
    </div>
  </div>
</form>

示例jsfiddle

Answer 2

此外，输入类型必须是“文本”或“电话”，formhelpers 才能工作：

bootstrap-formhelpers.min.js 的片段部分：

    ... ('form input[type="text"].bfh-phone, 
          form input[type="tel"].bfh-phone, span.bfh-phone').each(function(){
     ... 
 }); 

可能对某人有用

Answer 3

您忘记添加<form>标签。

只需将您的代码放入<form>标签中，它就会开始工作。

<form>

    <input type="text" id="inputTell" class="bfh-phone" data-format="(ddd) ddd-dddd">

</form>

注意：还添加必要的引导类，如控件、表单等。

Answer 4

I've try use type tel and another class

<div class="control-group">
   <input type="tel" class="form-control bfh-phone" data-format="(ddd) ddd-dddd" name="number" required>
</div>