如何在数字输入元素中显示空白而不是 0

Question

HTML 表单中的数字输入定义为

@Html.TextBoxFor(m => Model.Products[i].Soodkogus,
     new { type = "number", min = 0, @class = "quantity" })

这将生成内容为 0 的输入框。

如果输入框的值为0，如何让输入框为空？应仅显示非零值。

这是一个 ASP.NET 6 MVC Razor 应用程序。 jQuery 和 Bootstrap 5 被使用。

Answer 1

我不知道你的框架在生成这个输入字段时在后台做什么，但如果你只是想用 jQuery 实现这个逻辑 - 这样的事情应该有效。

$(document).ready(function(){
  $('input').val("");
  $('input').on('input',function(){
    if($(this).val() < 1)
    {
      $(this).val("");
    }
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<input type="number" min="0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

如何在数字输入元素中显示空白而不是 0

How to show blank instead of 0 in a numeric input element

javascript

html-input

number-formatting

razor

numeric-input