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

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);
    }
});

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

我想使这个字段可编辑,以便我可以输入十进制值.我在文档上看不到任何帮助.有人请在这里帮助我,我对html和javascript相当新.

Answer 1

更新（2018 年 11 月 1 日）：在最近的一次否决之后，我回来查看我的答案，这就是我发现的内容：selectionx-editable 使用它来处理要编辑的字段，但selection仅适用于字段呈现为文本，因此x-editable与数字字段一起使用将产生错误或不执行任何操作（有关详细信息，请参阅chrome bug 324360和415391）。因此，请使用此问题中提供的其他答案之一，或者参阅x-editor 的 github 问题 #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 和 SelectionEnd 在 <input 上不正确可用）类型=电子邮件/号码> )。因此，您可以尝试将字段类型更改为其他类型，并在函数中进行数字验证updateAccount。