X-editable: как добавить дополнительный атрибут в поле ввода? - PullRequest
Новая
       28

X-editable: как добавить дополнительный атрибут в поле ввода?

0 голосов
/ 04 сентября 2018

У меня есть ссылка с включенной 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">

Как я могу добавить этот дополнительный атрибут?

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018

Обратите внимание, что при каждом нажатии на элемент x-editable вы можете получить сгенерированный ввод во всплывающем окне с помощью 

$('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>
0 голосов
/ 04 сентября 2018

Вы можете использовать метод .attr() из jQuery: 

$('.input-sm').attr("pattern","blah")
0 голосов
/ 04 сентября 2018

Вы можете установить любое значение, используя метод 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;">
...