Question

我正在使用X-Editable为用户提供内联编辑值的可能性。这很好用，但我现在想把它用于一些以“欧洲方式”本地化的货币价值（例如：€ 12.000.000,00）。当我单击编辑时，我希望输入仅包含12000000。

有没有办法可以清理X-editable输入中显示的X-editable 中的值？欢迎所有提示！

Answer 1

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

在HTML中显示货币价值的元素：

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

HTML中的Javascript代码：

 <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的部分替换为您的案例。我刚刚在图书馆的演示网站上测试了这个名为＆＃34;简单文本字段＆＃34;使用chrome开发工具

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

由于x-editable表单将在显示之前生成。您需要将事件挂钩到文档并等待input内的x-editable字段获取焦点，即时间{{1显示并编辑您想要的任何值。

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

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

2 个答案:

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

2 个答案:

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