利用 jQuery 和 this 关键字实现输入字段的实时货币格式化

本教程详细讲解了如何使用 jquery 和 javascript 的 intl.numberformat api，实现对多个输入字段进行实时货币格式化，这些输入字段都带有特定的 css 类（例如 currency）。通过监听 keyup 事件并巧妙地运用此关键字，确保用户在输入任何输入框时，系统都能准确地格式化并更新当前操作的输入字段，从而提升用户体验。概述与挑战

在开发前台表格时，我们经常会遇到用户需要输入货币的情况。为了提升用户体验，将用户输入的数字格式化为标准货币格式（例如，“10,000”格式化为“Rp 10,000”）是相当常见的。当页面上有多个这样的输入域，它们共享相同的格式化逻辑（比如，它们都有货币米）的时候，如何确保当用户键入时，只有当前活动的输入域被正确格式化并更新，而不影响其他域，就成了一个核心挑战。

核心挑战在于：事件识别：准确识别哪个输入域触发了输入事件。实时响应：当用户键入（keyup）时立即进行格式化。2.核心解决方案：事件监听和this上下文

解决上述问题的关键是在JavaScript事件处理机制中使用this关键字。在事件处理函数内部，this通常指向触发事件的DOM元素。结合jQuery强大的选择器和事件绑定能力，我们可以将事件绑定到所有具有特定类名的元素上，然后在事件处理函数中使用$(this)获取并操作当前触发事件的jQuery对象。3.实现步骤和示例代码

我们将通过以下几个部分构建一个完整的实时货币格式化解决方案。 3.1 HTML 结构

首先，定义我们的输入字段。为了能够一起管理和绑定事件，这些字段应该共享一个通用的类名，例如 currency。同时，我们需要引入 jQuery 库，它是我们后续 JavaScript 代码的基础。

lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt； lt；meta charset=quot；UTF-8quot；gt； lt；meta name=quot；viewportquot； content=quot；width=device-width，initial-scale=1.0quot；gt； lt；titlet；时间设计手机化教育lt；/titlet； lt；!-- jQuery 库介绍 --gt； lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt； lt；stylegt； body { font-family： Arial， sans-serif； margin： 20px； } input { padding： 8px； margin-bottom： 10px； border： 1px solid #ccc； border-radius： 4px； width： 200px； } label { display： inline-block； width： 80px； vertical-align： top； margin-top： 8px；} lt；/stylegt；lt；/headgt；lt；bodygt； lt；h1gt； 实时货币输入字段格式 lt；/h1gt； lt；pgt； 请尝试在下面的输入框中输入数字，看看它是如何实时格式化的。 lt；input class=quot；form-textbox number-only currencyquot； type=quot；textquot； id=quot；nilai1quot； required/gt； lt；brgt； lt；label for=quot；nilai2quot；gt； amount 2：lt；/labelgt； lt；input class=quot；form-textbox number-only currencyquot； type=quot；textquot； id=quot；nilai2quot； required/gt； lt；!-- JavaScript 代码在这里 --gt；lt；/bodygt；lt；/htmlgt；登录后复制 3.2 货币格式化函数

创建一个独立的 JavaScript 函数，将纯数字格式化为指定地区的货币格式。

腾兰智影-AI电影人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天电影电影直播73查看详情 /** * 将数字格式化为货币格式。 * @param {number} 标称 - 需要格式化的数字。 * 格式化货币字符串后@returns {string}。 */function formatRupiah(nominal) { // 使用 'id-ID' locale 进行印尼盾发动化，不小数位数 return new Intl.NumberFormat('id-ID'， { style： 'currency'， // 格式化为 currency： 'IDR'， // 指定货币代码为印尼盾 (Indonesian Rupiah) minimumFractionDigits： 0 // 最小显示为 0 }).format(nominal)；} 登录后复制

该函数接收一个名义数字，返回一个格式化的字符串，例如 Rp 10,000。 3.3 实时格式化及格式化逻辑

接下来我们将使用 jQuery 的 keyup 事件监听器，结合 formatRupiah 函数，实现输入字段的实时格式化。

// 将 keyup 事件绑定到所有 class 的 .currency 的输入字段 $('.currency').keyup(function() { // 1. 获取当前输入字段的原始值 (this.value) // 2. 使用正确的表达式清除原始值，只保留数字 (0-9) 和小数点 (.) // 这样可以保证 parseFloat 能够正确分析，同时允许用户输入小数 var rawValue = this.value.replace(/[^0-9.]/g， '')； // 3. 将清洗后的字符串转换为浮点数 var numericValue = parseFloat(rawValue)； // 4. 检查转换后的值是否为有效数字 if (!isNaN(numericValue)) { // 5. 如果为有效数字，则使用 formatRupiah 函数格式化 var formattedValue = formatRupiah(numericValue)； // 6.将小原化后后回名和时间于件的可件的分品 // $(this) 将原生DOM元素 'this' 包装成 jQuery 对象，然后使用 .val() 方法设置其值 $(this).val(formattedValue)； } else { // 7. 如果输入无效（比如用户输入了非在线电影且旅表解析），则当前输入域为 $(this).val('')； }})； 登录后复制

代码分析：$('.currency').keyup(function(){ ... })；：这行代码选中了所有 class 的 currency 的输入域，并且给它们附加了 keyup 事件，这意味着每当用户在这些输入框中松开某个键时，就会执行括号内的匿名函数。 this.value.replace(/[^0-9.]/g, '')：this.value 获取当前输入域的原始值。 replace(/[^0-9.]/g, '') 是一个正则表达式，用于去除所有非数字（0-9）或（.）的字符。这个很重要，它会将原始输入清洗成一串纯数字 parseFloat 正白解析。parseFloat(rawValue): 将清洗后的字符串转换为浮点值。!isNaN(numericValue): 检查numericValue是否为有效数字。isNaN(Is Not a Number)函数用于判断单个值是否为非数字。formatRupiah(numericValue): 调用我们之前定义的货币格式化函数。$(this).val(formattedValue): 这个是实现精准返回的关键。将$(this)包装成一个jQuery对象，然后使用.val(formattedValue)方法设置输入字段的值。这样就实现了当前操作字段的精准更新。 $(this).val(''): 如果输入内容无法解析为有效数字，则当前输入字段为空，提供明确的用户反馈。

4. 完整代码示例

将所有代码片段组合在一起，形成完整的HTML文档，可直接在浏览器中运行： lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt； lt；meta charset=quot；UTF-8quot；gt； lt；meta name=quot；viewportquot； content=quot；width=device-width, initial-scale=1.0quot；gt； lt；titlet；电影最好手机化学教记lt；/titlet； lt；!-- Introducing jQuery 库 --gt； lt；script src=quot；https：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jsquot；gt；lt；/scriptgt； lt；stylegt； body { font-family： Arial，sans-serif； margin： 20px； } input { padding： 8px； 下边距: 10px; border: 1px solid #ccc； border-radius： 4px； width： 200px； } label { display： inline-block； width： 80px； vertical-align： top； margin-top： 8px；} lt；/stylegt；lt；/headgt；lt；bodygt； lt；h1gt； 实时货币输入字段格式 lt；/h1gt； lt；pgt；请尝试在下面的输入框中输入数字，观察其格式如何 印尼盾.lt；/pgt； lt；label for=quot；nilai1quot；gt；value 1：lt；/labelgt； lt；input class=quot；form-textbox number-only currencyquot； type=quot；textquot； id=quot；nilai1quot； required/gt； lt；brgt； lt；label for=quot；nilai2quot；gt；value 2：lt；/labelgt； lt；input class=quot；form-textbox仅数字货币”； type=quot；text”； id=quot；nilai2quot； required/gt； lt；scriptgt； /** * 将小少尼盾对话相对话图像； required/gt； lt；scriptgt； /** * @param {number} 标称 - 要格式化的数字。

*/ function formatRupiah(nominal) { return new Intl.NumberFormat('id-ID'， { style： 'currency'， currency： 'IDR'， minimumFractionDigits： 0 }).format(nominal)； } // 将 keyup 事件绑定到所有类为 .currency 的输入字段 $('.currency').keyup(function() { // 获取当前输入字段的值，并清理输入字段的值，清除字符 var rawValue = this.value.replace(/[^0-9.]/g， '')； var numericValue = parseFloat(rawValue)； if (!isNaN(numericValue)) { var formattedValue = formatRupiah(numericValue)； // 更新当前输入字段值 $(this).val(formattedValue)； } else { // 如果输入无效，则输入字段为 $(this).val('')； } })； lt；/scriptgt；lt；/bodygt；lt；/htmlgt；电影后图天5. 用户体验的注意事项和最佳实践：实时格式化应该在不干扰用户输入过程的情况下完成。本示例允许通过预留小点来输入小数字，这是货币金额的常见需求。

以上就是使用jQuery和this关键字实现输入域的实时货币格式化，更多详细内容，更多请关注乐哥常识网等相关文章！如何通过css设置背景元素、background-gradient、外部CSS样式加载错误、检查及解决方法、HTML/CSS布局：解决标签不规范导致元素重叠的问题、css颜色、变量命名规范、如何设置