Question

我的bootstrap应用程序有一个x-editable输入，我用它来编辑用户名。现在我需要使用jquery.maskedinput.min.js来获取屏蔽格式，而当我输入文本框时，当我点击跨度时，正如x-editable中那样。这是我的示例HTML代码

<div id="sZip" class="profile-info-value ">
<span class="editable" id="Dob">dob</span>
</div>

我通过应用像这样的查询来实现x可编辑

  $('#zip').editable({
                    type: 'text',
                    name: 'zip',
                    tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

                });

它工作正常现在我需要使该文本框可屏蔽，但当我调用这样的蒙版输入函数时

$(".dd").mask("99999-?9999");

它不起作用，我不知道确切的原因。非常感谢

Answer 1

它不起作用，因为x可编辑元素是动态添加的。

我希望这有效。

$('#users a').editable({
    type: 'text',
    name: 'username',
    tpl: '<input type="text" id ="zipiddemo" class="mask form-control    input-sm dd" style="padding-right: 24px;">'
});

$(document).on("focus", ".mask", function () {
    $(this).mask("(999) 999-9999? x99999");
});

DEMO

Answer 2

或者只是这样做：

  $('#zip .editable').editable({
                type: 'text',
                name: 'zip',
                tpl:'   <input type="text" id ="zipiddemo" class="form-control    input-sm dd" style="padding-right: 24px;">'

            }).on('shown',function(){
$("input#zipiddemo").mask("99-999");
  });

DEMO

Answer 3

您正在动态添加.dd输入，因此下方无效

$(".dd").mask("99999-?9999");

使用document查找元素然后将其屏蔽

   $(document).find(".dd").mask("99999-?9999");

Answer 4

改善Dhiraj的答案，更优雅的方式是使用Bootstrap X-editable API提供的inputclass属性。

<a data-inputclass="mask"></a> <!-- input -->

$(document).on("focus", ".mask", function () {
    $(this).mask("(999) 999-9999? x99999");
});

xeditable文本框内的屏蔽输入无法正常工作

4 个答案: