我想使用 Javascript 在可编辑控件中显示 {00.00} 这种格式吗？

Question

无论输入什么数字，当它弹出时我都想要{00.00}这种格式，有些我没有得到它背后的功能或逻辑：

$('#EstimatedHours').editable({
    showbuttons: false,
    unsavedclass: null,
    type: 'text',
    inputclass: 'estimatedhours-select',
    mode: 'popup',
    emptytext: 'Hours',
    clear: false,
    url: function (params) {
        var url = '@Url.Action("OnEstimatedHoursChange", "MyTasks")';
        var taskId = $("#SelectedTaskID").val();
        var EstHours = params.value
        var model = {
            "TaskID": taskId,
            "EstimatedHours": params.value
        }
        debugger;
        $("#dvLoading").show();
        $.ajax({
            url: url,
            data: model
        }).done(function (e) {
            debugger;
            $("#EstimatedHours").text($('.estimatedhours-select').val());
            $("#dvLoading").hide();
            toastr.success('Hours updated successfully.', 'Success', { timeOut: 5000, positionClass: "toast-bottom-right", closeButton: true })
            var taskid = $("#SelectedTaskID").val();
            $("#MainTaskHour-" + taskid).text(EstHours);
            $("#divTaskLatestEvents").html(e);
            
            document.getElementById('EstimatedHours').innerHTML = EstHours;//parseFloat(Math.round(EstHours * 100) / 100).toFixed(2);
            
            });
},

Answer 1

下面是一个基本示例，说明如何格式化输入，使其看起来像您想要的{00.00}格式。

 function onInputHandler(event) { const inputValue = sanatizeInput(event.target.value), outputElement = document.getElementById('myOutput'); if (outputElement !== null) { outputElement.textContent = formatInputAsTime(inputValue); } } function sanatizeInput(value) { // Return the provided value after replacing everything which // isn't a digit with an empty string. The resulting string // will only contain digits. return value.replace(/\\D/g, ''); } function formatInputAsTime(value) { const // Make sure the string is always at least 4 characters long. paddedValue = value + '0000', // Take the first 4 characters from the string, this will contain // the user's input padded with extra zeroes as needed. displayValue = paddedValue.substr(0, 4); // Take the first 2 chars, add a dot and add the last 2 characters. return `${displayValue.substr(0, 2)}.${displayValue.substr(-2)}`; } // Get the input element from the DOM and listen to its change event. const inputElement = document.getElementById('myInput'); if (inputElement !== null) { inputElement.addEventListener('input', onInputHandler); } // This will print 10.00 console.log(formatInputAsTime('1')); // This will print 12.30 console.log(formatInputAsTime('123')); // This will print 12.34 console.log(formatInputAsTime('12345'));

 .output { color: royalblue; font-family: monospace; font-size: 1.5em; margin-top: .5em; }

 <input type="text" id="myInput" placeholder="Enter time"> <p> formatted output: </p> <div id="myOutput" class="output"></div>

用户在输入中输入的任何内容都将转换为仅包含数字的字符串，然后将其格式化为00.00 。