我有一个x-editable启用了data-type="text"
的链接。
我想在编辑项目时创建的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">
如何添加此额外属性?
请注意,每次单击x-editable元素,您都可以使用弹出窗口中的生成输入
$('your element').on("click",function(){
$(this).next().find(".editable-input input").attr("data-pattern","yep 1!")
});
请参阅下面的代码:使用检查,您将看到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>
你可以使用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;">
你可以使用jQuery中的.attr()
方法:
$('.input-sm').attr("pattern","blah")