Question

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

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

因此，目前x-editable产生以下输入字段：

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

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

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

如何添加此额外属性？

Answer 1

请注意，每次点击x可编辑元素，您都可以到达生成的输入在弹出窗口中使用

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

请参见下面的代码段：使用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>

Answer 2

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

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

  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;">

Answer 3

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

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

X可编辑：如何在输入框中添加额外的属性？

3 个答案: