Question

我正在使用x-editable和bootstrap

我有以下html字段定义

<div class="form-group">
    <label class="col-sm-4">Service Charges(%)</label>
    <div class="col-sm-6 hoverEdit">
        <a class="editableAccount" id="serviceTax"></a>
    </div>
</div>

我定义了以下脚本以使字段可编辑

$('.editableAccount').editable({
    type : 'number',
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

现在，当我尝试编辑字段并输入小数值时，我得到了这个

enter image description here

我想让此字段可编辑，以便我可以输入小数值。我在文档上看不到任何帮助。有人请帮助我，我是html和javascript的新手。

Answer 1

我使用了x-editable shown事件并在那里设置了step属性：

var edit = (function () {

    var $editable = $('.editable');

    var setInputStep = function(editable, step) {
        var input = editable.input;
        if (input.type == 'number')
            input.$input.attr('step', step);
    };

    var shownEvent = function (e, editable) {
        setInputStep(editable, 0.01);
    };

    var init = function () {
        $editable.editable();
        $editable.on('shown', shownEvent);
    };

    return {
        init: init
    };

})();

edit.init();

在html中确保设置data-type="number"

<a href="#" class="editable" data-type="number" data-pk="1" data-url="/edit/" data-title="Enter Value" data-name="value">Sample</a>

Answer 2

可能使用文本字段和测试进行十进制验证：

$('.editableAccount').editable({
    type: 'text',
    title: 'Enter New Value',
    success: function(response, newValue) {
        updateAccount(this.id, newValue);
    },
    validate: function(value) {
        if ($.trim(value) == '') {
            return 'This field is required';
        }
        var regexp = new RegExp("^\d{0,2}(\.\d{0,2}){0,1}$");
        if (!regexp.test(value)) {
            return 'This field is not valid';
        }
    }
});

出于安全原因，还要进行验证服务器端。你可以使用一些非常基本的东西，如is_numeric()（在PHP中），但这将接受＆＃34;搞笑＆＃34;十六进制或二进制值等值。

Answer 3

更新（2018年11月1日）：在最近的一次downvote之后，我回过头来回顾我的回答，这是我发现的：x {editable}使用了selection处理要编辑的字段，但selection仅适用于呈现为文本的字段，因此使用带有数字字段的x-editable将产生错误或者什么也不做（请参阅{{3 }和chrome bug 324360了解详情）。因此，请使用此问题中提供的其他答案之一，或使用类似解决方案查看415391。

以下是出于历史目的的原始答案：

类型number的输入需要step属性才能接受小数。

来源：x-editor's github issue #328

从那里出来，你很可能需要像这样使用你的jQuery调用：

$('.editableAccount').editable({
    type : 'number',
    step: 'any', // <-- added this line
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

注意：我还没有对此进行测试，这只是我认为的最佳逻辑举措

编辑：关注您的评论（谢谢！），看起来我的建议无法正常工作，因为Chrome最近引入的限制（不确定其他浏览器）数字字段不再允许选择（来源：https://www.w3.org/TR/2010/WD-html-markup-20101019/input.number.html#input.number.attrs.step.float）。因此，您可以尝试将字段类型更改为其他内容，并在updateAccount函数中进行数字验证。

Answer 4

就我而言，我添加了自定义data

然后在某种事件上添加了所需的模式。

$("a[data-inputclass='onlyLongFloat']").click(function (e) {
    $(".onlyLongFloatAndNumber").attr({
        'pattern': '[0-9]+([\\.,][0-9]+)?',
        'title' : "The Fields Needs To Be An Float ",
        'step': '0.00001',
        'id': 'onlyLongFloatAndNumber'
    });
});

Answer 5

使用data-step =“ any”，而不是step =“ any”

<span id="cost" data-type="number" data-pk="1" data-title="cost" class="editable editable-click" data-step="any" onclick="callFunctionEditable('cost');">58.54545</span>

为x-editable字段取十进制输入

5 个答案: