Как очистить X-редактируемое значение * до * редактирования?

Question

Я использую X-Editable, чтобы дать пользователям возможность редактировать значения inline. Это отлично работает, но теперь я хочу использовать его для некоторых денежных значений, которые локализованы «по-европейски» (например, € 12.000.000,00). Когда я нажимаю кнопку «Редактировать», я хочу, чтобы вход содержал только 12000000.

Есть ли способ, которым я могу дезинфицировать значение в X-editable до, он отображается на входе X-Editable? Все советы приветствуются!

Answer 1

Посмотрите плункер http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b. Из X-редактируемой документации очевидно, что вы можете использовать свойство value конфигурации для форматирования значения, которое вы хотите отправить в редактор, как показано ниже.

Элемент отображения стоимости денег в вашем HTML:

<a href="#" id="money">12.000.000,00</a> 

код Javascript в вашем HTML:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $.fn.editable.defaults.mode = 'inline'; 
      $('#money').editable({ 
       type: 'text', 
       pk: 1, //Whatever is pk of the data 
       url: '/post', //Post URL 
       title: 'Enter money', //The title you want to display when editing 
       value:function(input) { 
        return $('#money').text().replace(/\./g, '').replace(/,00$/,''); 
       } 
      }); 
     }); 
</script> 

Если вы хотите отформатировать значение обратно на дисплее после редактирования вы можете сделать это в display свойства хеш-конфигурации:

  $('#money').editable({ 
       type: 'text', 
       pk: 1, //Whatever is pk of the data 
       url: '/post', //Post URL 
       title: 'Enter money', //The title you want to display when editing 
       value:function() { 
        return $('#money').text().replace(/\./g, '').replace(/,00$/,''); 
       }, 
       display:function(value) { 
        //var formattedValue = formatTheValueAsYouWant(value); 
        //$('#money').text(formattedValue); 
       } 
      }); 

Answer 2

Кажется, что функция обратного вызова недоступна для того, что вы хотите. , поэтому вам нужно сделать это за пределами библиотеки.

вот как это сделать.

$(document).on("focus",".form-control.input-sm",function(){ 
    //remove all characters but numbers 
    var _val = $(this).val().match(/\d/g).join(""); 
    //set it. 
    $(this).val(_val); 
}); 

замените часть .form-control.input-sm на ваш случай. я только проверил это на первом дем библиотеки демонстрационного сайта fieled под названием «Простое текстовое поле» с хромированной developper инструментами

http://vitalets.github.io/x-editable/demo-bs3.html

Поскольку х редактируемой форма будет генерироваться прямо перед показом up.You необходимости зацепить событие для документирования и ожидания input поле внутри формы x-editable получает фокус, который является временем x-editable показывает и редактирует значение во все, что вы хотите.

и Да, этот метод работает ПОСЛЕ Поле ввода отображается, но вряд ли можно заметить, что значение изменяется после его отображения.