时间戳

首页 > 解决方案 > JQuery有条件地设置嵌套输入元素的格式化文本

javascript - JQuery有条件地设置嵌套输入元素的格式化文本

问题描述

我从带有 ASP.Net MVC 的 JQuery 开始，并努力实现以下要求：

对于包含在具有特定（myId）的元素中的所有input元素，我需要编写一个函数，当焦点被移除/表单被保存并设置时，该函数将格式化该特定文本框中包含的数字（逗号分隔并使用小数） . 目前，它仅在重新加载页面时正确反映。type = texttdid

在此处输入图像描述

到目前为止，我已经设法写了：

$(document).ready(function () {
        $('tr td[id*=myId] input[type=text]').on("focusout", function (element) {
            console.log(this);
            //$(element).fval($.myFormat.format(element.value));
            });
    });

wheremyFormat.js是一个 JavaScript 文件，其中包含一个调用format()来格式化值的方法（逗号分隔并使用小数）。例如：$.myFormat.format(232038232233)给"232,038,232,233.00"

注意：注释掉的行会引发错误。

任何帮助都是有益的。

更新 我尝试了以下内容：

$(document).ready(function () {
            $('tr td[id*=myId] input[type=text]').on("focusout", function (element) {
                console.log(this);
                $(this).val($.myFormat.format(this.value));;
                });
        });

我给出437427244了输入值，但不幸的是，输出仍未格式化（事实上，当我查看控制台的值时，我可以看到旧值（我更改之前的值）仍在显示。

    <input class="DataOriginUserInput numeric" data-formatinfo="n2" 
data-formattype="1" dataorigvalue="578,575,979,700.00" 
data-val="true" id="myId_11" name="..." 
type="text" value="578,575,979,700.00">

标签： javascriptjqueryasp.net-mvc

解决方案

我不知道$.myFormat插件是从哪里来的，所以只是将数千个格式化程序放在一起并针对类

function numberWithCommas(x) {   
    return x.toString().replaceAll(',','').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

$('input.DataOriginUserInput.numeric').on("focusout", function (event) {
     $(this).val(numberWithCommas(this.value))
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>  <input class="DataOriginUserInput numeric" data-formatinfo="n2" 
data-formattype="1" dataorigvalue="578,575,979,700.00" 
data-val="true" id="myId_11" name="..." 
type="text" value="578,575,979,700.00"></td>
  </tr>
  <tr>
    <td><input class="DataOriginUserInput numeric" type="text" id="myId2" value="13456899999"></td>
  </tr>
  <tr>
    <td><input class="DataOriginUserInput numeric" type="text" id="myId3" value="444444444444444.99"></td>
  </tr>
</table>

推荐阅读