X-editable：如何在输入框中添加额外的属性？答案

【问题标题】：X-editable: How to add an extra attribute to the input box?X-editable：如何在输入框中添加额外的属性？
【发布时间】：2018-09-04 13:06:43
【问题描述】：

我有一个使用data-type="text" 启用x-editable 的链接。

我想在编辑项目时创建的input 字段中添加一个附加属性。

所以目前 x-editable 正在生成以下输入字段：

<input type="text" class="form-control input-sm" style="padding-right: 24px;">

我想添加一个模式属性，所以它看起来像（添加模式 attr ）：

<input type="text" class="form-control input-sm" style="padding-right: 24px;" pattern="blah">

如何添加这个额外的属性？

【问题讨论】：

试试看文档api.jquery.com/attr，基本$(element).attr("attribute","value")
@CarstenLøvboAndersen 我无法访问我可以找到的元素。我可以通过可编辑构造函数为输入提供一个类，但是，在单击元素之前，该输入字段不存在（通过 x-editable 转换为输入字段）。所以如果我做了$('.class').attr("pattern", "blah"); 那么它不会做任何事情，因为input 还不存在。如果我错了，请纠正我。

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

【解决方案1】：

请注意，每次单击 x-editable 元素都可以访问生成的输入在弹出窗口中使用

$('your element').on("click",function(){
  $(this).next().find(".editable-input input").attr("data-pattern","yep 1!")
});

参见下面的 sn-p ：使用 inspect 你会看到 pattern attr 存在

$(function() {
    $('#username1').editable();
    
    $('#username1').on("click",function(){
      $(this).next().find(".editable-input input").attr("data-pattern","yep 1!")
    });
    
    $('#username2').editable();
    
    $('#username2').on("click",function(){
      $(this).next().find(".editable-input input").attr("data-pattern","yep 2!")
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<br><br><br><br><br>
<a href="#" id="username1" data-type="text" data-pk="1" data-title="Enter username">superuser 1</a>
<br><br><br><br>
<a href="#" id="username2" data-type="text" data-pk="2" >superuser 2</a>

【讨论】：

【解决方案2】：

您可以使用attr 方法设置任何值（我们没有addAttr 方法，因为我们有addClass 类，我们只需要使用element.attr('AttributeName','AttributeValue')）。

如果您希望删除该属性，则可以使用以下语法。

  element.removeAttr('AttributeName')

$('input').attr('pattern','desiredValue');
alert($('input').attr('pattern'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control input-sm" style="padding-right: 24px;">

【讨论】：

评论为什么投反对票？并解释答案有什么问题
我上面的回复和你的回答有同样的问题，不是我对你的回答不以为然。
不是我的投票（没有代表），但我认为问题在于您的回答与问题中的评论基本相同
好的..@PeterHansen，在我发布答案之前我还没有看到评论

【解决方案3】：

您可以使用 jQuery 中的.attr() 方法：

$('.input-sm').attr("pattern","blah")

【讨论】：