当您键入 IT 时，文本字段以货币格式实时显示数字。示例：1,000.00答案

【问题标题】：Textfield to display number in REALTIME with CURRENCY FORMAT as you type IT. Exmple: 1,000.00当您键入 IT 时，文本字段以货币格式实时显示数字。示例：1,000.00
【发布时间】：2021-01-11 19:19:06
【问题描述】：

我一直在尝试使此代码在您键入时以实时货币格式显示文本字段编号。但是一旦页面被加载，它会给我一条错误消息，内容如下：警告：number_format() 期望参数 1 为双倍...

请，有人可以帮我解决代码问题。下面是我的代码。

            <input id="source" type="text" oninput="copyData('source', 'target')"  />
            
            <?php
            $num = '<span id="target" class="myDIV"></span>';
            $formattedNum = number_format($num, 2);
            echo $formattedNum;
            ?>
            
            <script type="text/javascript">
                  function copyData(sourceId, targetId) {
                    var data = document.getElementById(sourceId).value;
                    document.getElementById(targetId).innerHTML = data; 
                  }
            </script>

【问题讨论】：

您正在混合使用 php 和 JavaScript。 php 代码在您的服务器上运行； JavaScript 在客户端浏览器上运行。
你应该首先阅读What is the difference between client-side and server-side programming?。

标签： javascript php string real-time money-format

【解决方案1】：

使用 jquery 掩码货币库，如
here.
您可以找到例如here。
另一个示例链接是this。

片段示例：

$(document).ready(function(){
  $('#maskmoney').maskMoney();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>

<input id="maskmoney" name="mask_input" type="text">

【讨论】：

请在您的回答中包含一个示例，以防 github 页面被删除
@jonatjano 示例链接已经存在，让我为您添加另一个 jqueryscript.net/demo/… 也会为您创建 codepan 链接
这里是示例链接codepen.io/saini3080/pen/MWyxwZV谢谢
@GSAINI 我冒昧地从您的 codepen 创建了一个 sn-p，如果您愿意，可以将其删除

【解决方案2】：

您不能使用 PHP 进行实时更新。为此，您需要使用 JS

PHP的number_format(number, n)可以替换成JS的Number.toFixed(n)

function copyData(sourceId, targetId) {
  var data = Number(document.getElementById(sourceId).value);
  document.getElementById(targetId).innerHTML = data.toFixed(2); 
}

<input id="source" type="text" oninput="copyData('source', 'target')"  />
<span id="target" class="myDIV"></span>

您可以进一步使用 Intl.NumberFormat 和 style: 'currency'，这将检测您的用户位置并以用户的区域格式显示值

function copyData(sourceId, targetId) {
  var data = Number(document.getElementById(sourceId).value);
  document.getElementById(targetId).innerHTML = new Intl.NumberFormat(undefined, { style: 'currency', currency: 'EUR' }).format(data); 
}

<input id="source" type="text" oninput="copyData('source', 'target')"  />
<span id="target" class="myDIV"></span>

【讨论】：