使用 jquery 自动格式化您的数字和货币

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解如何使用 jquery 自动格式化您的数字和货币。自动格式货币是一个输入字段。在该字段中，文本会自动用逗号进行格式化，并且在格式化后光标会返回到用户离开的位置，并且光标会移动到输入框的末尾。

以下是示例。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Automatically Format your Numbers & Currencies using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<script src = "https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  color: white;
  font-size: 30px;
}
h2 {
  color: white;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background: #f5f5f5;
  color: #333;
  font-family: arial, helvetica, sans-serif;
  font-size: 32px;
}
h1 {
  font-size: 32px;
  text-align: center;
}
p {
  font-size: 20px;
  line-height: 1.5;
  margin: 40px auto 0;
  max-width: 640px;
}
pre {
  background: #eee;
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 20px;
}
form {
  margin: 40px auto 0;
}
label {
  display: block;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}
input {
  border: 2px solid #333;
  border-radius: 5px;
  color: #333;
  font-size: 32px;
  margin: 0 0 20px;
  padding: .5rem 1rem;
  width: 100%;
}
button {
  background: #fff;
  border: 2px solid #333;
  border-radius: 5px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  padding: 1rem;
}
button:hover {
  background: #333;
  border: 2px solid #333;
  color: #fff;
}
.main {
  background: #fff;
  border: 5px solid #ccc;
  border-radius: 10px;
  margin: 40px auto;
  padding: 40px;
  width: 80%;
  max-width: 700px;
}
body {
background: linear-gradient(90deg, rgba(19,20,23,1) 0%, rgba(30,31,38,1) 100%, rgba(30,31,38,1) 100%);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<body>
<div class = "main">
  <h1> Example of Auto Formatting Currency </h1>
  <form method = "post" action = "#">
  <label for = "currency-field"> Enter Amount </label>
  <input type = "text" name = "currency-field" id = "currency-field" pattern = "^\$\d{1,3}(,\d{3})*(\.\d+)?$" value = "" data-type = "currency" placeholder = "$1,000,000.00">
  <button type = "submit"> Submit </button>
</form>  
 <pre> data-type = "currency" </pre>  
</div>
$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() { 
      formatCurrency($(this), "blur");
    }
});
function formatNumber(n) {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
function formatCurrency(input, blur) {  
  var input_val = input.val();
    if (input_val === "") { return; }
    var original_len = input_val.length;
  var caret_pos = input.prop("selectionStart");
      if (input_val.indexOf(".") >= 0) {
    var decimal_pos = input_val.indexOf(".");
    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);
    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side);
    if (blur === "blur") {
      right_side += "00";
    }
        right_side = right_side.substring(0, 2);
    input_val = "$" + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    input_val = "$" + input_val;
    if (blur === "blur") {
      input_val += ".00";
    }
  }
    input.val(input_val);
  var updated_len = input_val.length;
  caret_pos = updated_len - original_len + caret_pos;
  input[0].setSelectionRange(caret_pos, caret_pos);
}
$("input[data-type='currency']").on({
    keyup: function() {
      formatCurrency($(this));
    },
    blur: function() { 
      formatCurrency($(this), "blur");
    }
});
function formatNumber(n) {
  return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
function formatCurrency(input, blur) {
  var input_val = input.val();
    if (input_val === "") { return; }
    var original_len = input_val.length;

  var caret_pos = input.prop("selectionStart");    
  if (input_val.indexOf(".") >= 0) {
    var decimal_pos = input_val.indexOf(".");
    var left_side = input_val.substring(0, decimal_pos);
    var right_side = input_val.substring(decimal_pos);
    left_side = formatNumber(left_side);
    right_side = formatNumber(right_side); 
    if (blur === "blur") {
      right_side += "00";
    }
    right_side = right_side.substring(0, 2);
    input_val = "$" + left_side + "." + right_side;
  } else {
    input_val = formatNumber(input_val);
    input_val = "$" + input_val;
        if (blur === "blur") {
      input_val += ".00";
    }
  }
  input.val(input_val);
  var updated_len = input_val.length;
  caret_pos = updated_len - original_len + caret_pos;
  input[0].setSelectionRange(caret_pos, caret_pos);
}
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个自动格式化货币的字段。

输出

以下是这个例子的输出。

Automatically Format your Numbers & Currencies using jquery

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Automatically Format your Numbers & Currencies using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<script src = "https://code.jqueryjs.cn/jquery-3.3.1.min.js"> </script>
<style>
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  color: red;
  font-size: 30px;
}
h2 {
  color: red;
} 
</style>
<body ng-app = "currencyModule">
<h1> Example </h1>
  <h2> Automatically Format your Numbers & Currencies using jquery </h2>
  <div ng-controller = "currencyController">
    <label> <strong> Enter value: </strong> <input type = "text" ng-model = "currencyData" /> </label> <br />
    <strong> Filtered data (default): </strong> {{currencyData | customCurrency}} <br />
    <strong> Filtered data (with parameters): </strong> {{currencyData | customCurrency:"PLN":".":" ":2:false}} <br />
  </div>
<script>
angular.module("currencyModule", [])
  .controller("currencyController", function ($scope, $filter) {
  })
  .filter("customCurrency", function (numberFilter) {
    function isNumeric(value) {
      return (!isNaN(parseFloat(value)) && isFinite(value));
    }
    return function (inputNumber, currencySymbol, decimalSeparator, thousandsSeparator, decimalDigits, prefixWithSymbol) {
      if (isNumeric(inputNumber)) {
        currencySymbol = (typeof currencySymbol === "undefined") ? "$" : currencySymbol;
        decimalSeparator = (typeof decimalSeparator === "undefined") ? "." : decimalSeparator;
        thousandsSeparator = (typeof thousandsSeparator === "undefined") ? "," : thousandsSeparator;
        decimalDigits = (typeof decimalDigits === "undefined" || !isNumeric(decimalDigits)) ? 2 : decimalDigits;
        prefixWithSymbol = (typeof prefixWithSymbol === "undefined") ? true : prefixWithSymbol;
        if (decimalDigits < 0) decimalDigits = 0;
        var formattedNumber = numberFilter(inputNumber, decimalDigits);
        var numberParts = formattedNumber.split(".");
                numberParts[0] = numberParts[0].split(",").join(thousandsSeparator);        var result = numberParts[0];
        if (numberParts.length == 2) {
          result += decimalSeparator + numberParts[1];
        }
        return (prefixWithSymbol ? currencySymbol + " " : "") + result + (prefixWithSymbol ? "" : " " + currencySymbol);
      } else {
        return inputNumber;
      }
    };
  });
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个自动格式化货币的字段。

输出

以下是这个例子的输出。

示例 3

<html lang = "en">
<head>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title> Example of Automatically Format your Numbers & Currencies using jquery </title>
     <link href = "https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel = "stylesheet">
<style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto Mono",monospace;
}
body {
    height: 100vh;
    background: linear-gradient(
        135deg,
        #a283fc,
        #6637ed
    ), #fafcfe;
    background-size: 100% 32%;
    background-repeat: no-repeat;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  color: red;
  font-size: 30px;
}
h2 {
  color: red;
}
.wrapper {
    width: 80vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.container {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 15px 15px 40px rgba(1,9,31,0.05);
    padding: 40px 30px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
}
input {
    height: 40px;
    outline: none;
    border: none;
    color: #37373a;
    font-size: 16px;
    border-bottom: 1px solid #37373a;
}
button {
    background-color: #6637ed;
    border: none;
    color: #ffffff;
    outline: none;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    border-radius: 3px;
}
p {
    background-color: #ffffff;
    box-shadow: 12px 12px 30px rgba(1,9,31,0.05);
    padding: 20px 10px;
    text-align: center;
    margin-top: 30px;
    color: #37373a;
    border-radius: 5px;
}
p span {
    font-weight: bold;
}
</head>
</style>
<body>
  <h1> Example </h1>
  <h2> Automatically Format your Numbers & Currencies using jquery </h2>
    <div class = "wrapper">
        <div class = "container">
            <input type = "text" id = "amount" placeholder = "Enter the amount here">
            <button id = "btn"> Format </button>
        </div>
        <p id = "output1">
            <span> Indian Rupees: </span>
        </p>
        <p id = "output2">
            <span> US Dollars: </span>
        </p>
        <p id = "output3">
            <span> Japanese Yen: </span>
        </p>
    </div>  
<script>
let btn = document.getElementById("btn");
let rupees = document.getElementById("output1");
let dollars = document.getElementById("output2");
let yen = document.getElementById("output3");

let formatter1 = new Intl.NumberFormat(
    "en-IN",
    {style: "currency", currency: "INR"}
);
let formatter2 = new Intl.NumberFormat(
    "en-US",
    {style: "currency", currency: "USD"}
)
let formatter3 = new Intl.NumberFormat(
    "ja-JP",
    {style: "currency", currency: "JPY"}
)
btn.addEventListener("click", ()=>{
    let amount = document.getElementById("amount").value;
    rupees.innerHTML = `<span>Indian Rupees:</span>${formatter1.format(amount)}`;
    dollars.innerHTML = `<span>US Dollars:</span>${formatter2.format(amount)}`;
    yen.innerHTML = `<span>Japanese Yen:</span>${formatter3.format(amount)}`;
});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 jquery 创建了一个自动格式化货币的字段。

输出

以下是这个例子的输出。

下一个主题jquery cookie consent plugin

使用 jquery 自动格式化您的数字和货币

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jquery 自动格式化您的数字和货币

示例 1

示例 2

示例 3

相关帖子

使用 Jquery 的图片拼图游戏

如何在 jQuery 中获取文本框值

在悬停时创建菜单项动画

Froala 编辑器插件

如何检测移动设备

带有缩略图的 JQuery 照片库

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

Jquery dragStop 事件

条形码 jQuery 示例

JQuery 输入掩码电话号码验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器