如何在*编辑之前清理 X-Editable 值？

Question

我正在使用 X-Editable 让用户可以内联编辑值。这很好用，但我现在想将它用于一些在 "European way" 中本地化的货币值（例如：€ 12.000.000,00）。当我点击编辑时，我希望输入只包含 12000000。

有没有一种方法可以在 X-editable 中清理值，然后它显示在 X-Editable 输入中？欢迎所有提示！

Answer 1

好像没有你想要的回调函数。 所以你需要把它放在图书馆外面。

这是操作方法。

$(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的部分替换成你的情况。 我刚刚使用 chrome developper tools

在图书馆的演示站点的第一个名为 "Simple text field" 的演示字段上测试了这个

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

因为 x-editable 表单会在显示之前生成 up.You 需要将事件挂接到文档并等待 x-editable 表单内的 input 字段获得焦点，这是时间 x-editable 出现并将值编辑为您想要的值。

是的，此方法有效 在 输入字段显示后，但几乎不可能注意到值在显示后发生变化。

Answer 2

请参阅 plunker http://plnkr.co/edit/Vu78gRmlKzxrAGwCFy0b。从 X-editable 文档中可以明显看出，您可以使用配置的值 属性 来格式化要发送给编辑器的值，如下所示。

在您的 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);
                }
           });