Jquery 为x-可编辑字段采用十进制输入

我正在使用引导

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

现在，当我尝试编辑字段并输入十进制值时，我得到了以下结果

我想使此字段可编辑，以便输入十进制值。我看不到有关文档的任何帮助。有人请帮助我，我对html和javascript相当陌生。

更新（2018年11月1日）：在最近的一次否决投票后，我回来回顾我的答案，我发现：

选择

被x-editable用来处理要编辑的字段，但是

选择

仅适用于呈现为文本的字段，因此将

x-editable

与数字字段一起使用将产生错误或不执行任何操作（有关详细信息，请参阅和）。因此，请使用本问题中提供的其他答案之一，或者使用类似的解决方案

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

---

number

类型的输入需要一个

step

属性才能接受小数

资料来源：

从那以后，您很可能需要像这样使用jQuery调用：

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

$（'.editableAccount'）。可编辑({
键入：“编号”，
步骤：'any'，//可能使用文本字段和测试进行十进制验证：

$('.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中），但这将接受“有趣”的值，如十六进制值或二进制值。
我使用了x-editable
显示的
事件，并在那里设置
步骤
属性：

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添加了所需的模式

$（“a[data inputclass='onlyLongFloat']）。单击（函数（e）{
$（“.onlyLongFloatAndNumber”）.attr({
“模式”：“[0-9]+（[\\，][0-9]+）？”，
'title'：“字段必须是浮点”，
“步骤”：“0.00001”，
“id”：“onlyLongFloatAndNumber”
});
});
使用data step=“any”，而不是step=“any”


58.54545
实际上我已经试过了。在这种情况下，我开始得到这个错误Uncaught InvalidStateError:未能对“HTMLInputElement”执行“setSelectionRange”：输入元素的类型（'number'）不支持选择。很抱歉，伙计……您可以尝试将其设置为文本或其他字段，然后将数字验证添加到您的
updateactun
函数中（在
success
中），你试过了吗？没问题，伙计，这里的想法是显示信息并使其可编辑，这意味着用户可以通过单击来编辑显示的信息，这就是我使用.editable（）的原因方法。因此，将字段本身设置为文本字段可能对我不起作用。但非常感谢您的评论。我真的很感激他们。嗯……您的意思是您希望在键入时对其进行验证吗？将另一个单独的函数添加到同一个类中不会起作用吗？只是想知道……RegExp必须是camelCase，other解决方案是将正则表达式放在//
var regexp=/^\d{0,2}（\.\d{0,2}）{0,1}$/；
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();

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