xeditable文本框中的屏蔽输入不起作用答案

【问题标题】：masked input inside xeditable text box not workingxeditable文本框中的屏蔽输入不起作用
【发布时间】：2014-07-19 05:06:05
【问题描述】：

我的引导应用程序有一个 x-editable 输入，用于编辑用户名。现在我需要使用 jquery.maskedinput.min.js 来获取掩码格式，同时 iam 输入文本框，当我点击跨度时出现的 x-editable 。这是我的示例 html 代码

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

我通过像这样应用 j 查询实现了 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");

它不工作，我不知道确切的原因。任何帮助将不胜感激

【问题讨论】：

请在 jsfiddle.net 上添加一个演示并在此处发布链接

标签： jquery html twitter-bootstrap x-editable maskedinput

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

【讨论】：

hai Dhiraj Bodicherla 我还有一个疑问，如何在 x-editable 中显示密码字段。如果我有数据库中的密码字段并且我输入类型：'密码'，在可编辑函数中，当我单击跨度时，它将显示为密码，单击提交按钮后，它显示为“[隐藏]”。我的问题是第一次当数据来自数据库时，当我将值放入跨度时，它只是显示了实际值，我怎样才能让它看起来像'[隐藏]'
这对我有用。我唯一关心的是：我们如何确保在模板视图中填充数据？我在两个地方做了这个改变。一个预填充表单，另一个不预填充。

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

【讨论】：

【解决方案3】：

改进 Dhiraj 的回答，更优雅的方法是使用 Bootstrap X-editable API 提供的 inputclass 属性。

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

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

【讨论】：

【解决方案4】：

您正在动态添加.dd 输入，因此下面将不起作用

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

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

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

【讨论】：