X-editable: How to add an extra attribute to the input box?

Question

I have a link that has x-editable enabled on it with data-type="text".

I want to add an additional attribute to the input field that is created when the item is being edited.

So at the moment x-editable is producing the following input field:

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

And I want to add a pattern attribute, so it would look like (adding pattern attr ):

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

How can I add this extra attribute?

Answer 1

Note that every click on the x-editable element you can reach the generated input in the popup by using

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

See below snippet : using inspect you'll see that the pattern attr is present

$(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>