如何使用下拉菜单更改数据输入掩码前缀

Posted 2023-05-08

【中文标题】如何使用下拉菜单更改数据输入掩码前缀

【英文标题】：How to change data-inputmask prefix using dropdown

【发布时间】：2021-01-04 11:04:20

【问题描述】：

我使用Robin Herbot inputmask plugin 进行货币输入。每次触发交换下拉更改事件时，我都想更改货币符号。但是 inputmask 前缀阻止更改货币符号。我有这个代码：

html：

 @Html.DropDownListFor(model => model.exchange, 
               new SelectList(@ViewBag.rates, "Value", "Text",4), null, new
                       
                           @Style = "height:34px;width:370px !important;font-size: 14px;",
                           @class = "form-control input-lg"
                       
              )
 <input type="text"
                       class="form-control text-left monerate"
                       id="price1"
                       name="price1"
                       placeholder="₺ 0.00"
                       data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'prefix': '₺ ', 'placeholder': '0'" />
  

JQuery:

  $('input.monerate').inputmask();

  $(document.body).delegate('#exchange', 'change', function ()   
        exchangeID = $('#exchange :selected').val();
        if (exchangeID == 1) 
            $("#price1").inputmask( alias: "currency", prefix: '$ ' );           
        
        else if (exchangeID == 2)            
            $("#price1").inputmask( alias: "currency", prefix: '€ ' );
        
        else if (exchangeID == 3)             
            $("#price1").inputmask( alias: "currency", prefix: '£ ' );
        
        else if (exchangeID == 4) 
            $("#price1").inputmask( alias: "currency", prefix: '₺ ' );
                
    );   

有没有办法改变前缀？

我已阅读此答案，但对我不起作用：

Change the currency symbol or remove it in the inputmask currency

小提琴： https://jsfiddle.net/6kzjLd7u/10/

【问题讨论】：

请提供此代码的最小工作示例

@AlwaysHelping 我加了一个小提琴

不幸的是，它不起作用@AlwaysHelping

你能告诉我它不工作的代码吗？您确定您使用的是我在答案中提供的代码吗？

@AlwaysHelping 我已经可以获取exchangeID，但问题是，它没有更改占位符“₺”，也没有更改输入框中的前缀..

【参考方案1】：

您需要像下面这样使用您的on-change 函数。此外，默认情况下选择的value 是string，但您将value 视为integer，这是您的代码不起作用的原因之一。

添加将选项视为整数，我们可以使用unary operator (+) - 在获取值之前添加一个加号将使其成为整数

var exchangeID = +$(this).val(); //parse as number - by default it is string

其次，对于 Robin Herbot inputMask 动态加载并从 dropdown 更改 currency 前缀，您还需要在 jQuery 中分配 initial 前缀。由于您在HTML 中静态地 定义了它，它将不会按预期工作。

最后，您的代码已全部修复，并且随着货币prefix 在选择时发生变化，可以正常工作。

现场工作演示：

//by default on page load
$("#price1").inputmask(
  alias: "currency",
  prefix: '₺ '
);

//apply prefix on select option change
$(document).on('change', '#exchange', function() 
  var exchangeID = +$(this).val(); //parse as number not - by default is string
  if (exchangeID == 1) 
    $("#price1").inputmask(
      alias: "currency",
      prefix: '$ '
    );
   else if (exchangeID == 2) 
    $("#price1").inputmask(
      alias: "currency",
      prefix: '€ '
    );
   else if (exchangeID == 3) 
    $("#price1").inputmask(
      alias: "currency",
      prefix: '£ '
    );
   else if (exchangeID == 4) 
    $("#price1").inputmask(
      alias: "currency",
      prefix: '₺ '
    );
  
);

input.monerate 
  text-align: left !important;
  width: 300px;


select 
  width: 300px !important;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script>

<div style="margin:10px;">
  <label for="exchange">Choose a currency:</label>

  <select name="exchange" id="exchange" class="form-control">
    <option selected disabled>Choose</option>
    <option value="1">USD</option>
    <option value="2">Euro</option>
    <option value="3">Pound</option>
    <option value="4">TL</option>
  </select>
</div>

<div style="margin:10px;">
  <label>Price:</label>
   <input type="text" class="form-control text-left monerate" id="price1" name="price1" placeholder="₺ 0.00" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0'" />
</div>