引导表单助手电话不起作用答案

【问题标题】：bootstrap form helper phone wont work引导表单助手电话不起作用
【发布时间】：2013-05-25 13:30:17
【问题描述】：

我正在尝试使用表单 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 文件，但我不确定它为什么不起作用。

【问题讨论】：

在 js 控制台（Chrome/Firefox 上的 Shift+Ctrl+J）中没有报错吗？
不，它没有给我任何错误，但是我认为它不会读取 CSS 文件，它已正确链接，当我使用检查元素时，它不会显示 CSS 属性。我不知道会出什么问题。

标签： twitter-bootstrap form-helpers

【解决方案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

【讨论】：

感谢您指出这一点！热链接的 bootstrap-formhelpers.js 消失了。现在它又开始工作了。

【解决方案2】：

另外，输入类型必须是“text”或“tel”，formhelpers 才能工作：

来自 bootstrap-formhelpers.min.js 的 sn-p 部分：

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

可能对某人有用

【讨论】：

【解决方案3】：

您忘记添加<form> 标签。

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

<form>

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

</form>

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

【讨论】：

【解决方案4】：

我已经尝试使用类型 tel 和另一个类

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

【讨论】：