为 x 可编辑字段采用十进制输入答案

【问题标题】：taking decimal inputs for x-editable field为 x 可编辑字段采用十进制输入
【发布时间】：2014-04-26 19:34:02
【问题描述】：

我正在使用 x-editable 和引导程序

我定义了以下 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);
    }
});

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

我想让这个字段可编辑，以便我可以输入十进制值。我在文档上看不到任何帮助。有人请在这里帮助我，我对 html 和 javascript 还很陌生。

【问题讨论】：

标签： jquery twitter-bootstrap x-editable

【解决方案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>

【讨论】：

【解决方案2】：

更新（2018 年 11 月 1 日）：在最近的一次否决之后，我回来查看我的答案，这是我发现的：selection 被 x-editable 用于处理要编辑的字段，但 selection 仅适用于呈现为文本的字段，因此将 x-editable 与数字字段一起使用将产生错误或什么也不做（有关详细信息，请参阅 chrome bug 324360 和 415391 ）。因此，请使用此问题中提供的其他答案之一，或使用类似的解决方案查看 x-editor's github issue #328。

这是我出于历史目的的原始答案：

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

来源：https://www.w3.org/TR/2010/WD-html-markup-20101019/input.number.html#input.number.attrs.step.float

从此，您很可能需要像这样使用您的 jQuery 调用：

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

注意：我没有对此进行测试，这只是我认为最合乎逻辑的举动

编辑：根据您的评论（谢谢！），我的建议似乎不起作用，因为最近在 chrome 中引入了限制（不确定其他浏览器）对数字字段不再允许选择（来源：selectionStart and SelectionEnd incorrectly available on <input type=email/number>)。因此，您可以尝试将字段类型更改为其他类型，并在 updateAccount 函数中进行号码验证。

【讨论】：

其实我已经试过了。在那种情况下，我开始收到此错误
未捕获的 InvalidStateError：无法在“HTMLInputElement”上执行“setSelectionRange”：输入元素的类型（“数字”）不支持选择。
对不起，伙计...也许您可以尝试将其设置为文本或其他字段，并将数字验证添加到您的 updateAcctoun 函数（在 success 中），你试过吗？
没问题的人，这里的想法是显示信息并使其可编辑，这意味着用户可以通过单击它来编辑显示的信息，这就是我使用 .editable() 方法的原因x 可编辑插件。因此，将字段本身设置为文本字段可能对我不起作用。但是非常感谢您的cmets。我真的很感激他们。
hm...你的意思是你希望它在你打字的时候验证吗？不会将另一个单独的函数添加到同一个类中吗？只是想知道......

【解决方案3】：

也许使用文本字段并测试十进制验证：

$('.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 中），但它会接受“有趣”的值，例如十六进制或二进制值。

【讨论】：

正则表达式必须是驼峰式，其他解决方法是将正则表达式放在 //var regexp = /^\d{0,2}(\.\d{0,2}){0,1}$/;

【解决方案4】：

使用 data-step="any" ，而不是 step="any"

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

【讨论】：

【解决方案5】：

在我的例子中，我添加了自定义 data

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

$("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'
    });
});

【讨论】：