使用相同的 class 獲取所有輸入值並將它們替換為 % 符號作為“數字”？

Question

獲取具有相同 class 名稱的輸入值並將該值與 % 符號一起替換，它不應該是字符串或 object 類型應該是“數字”。

例如：如果我在輸入字段中輸入 25，它應該更改為 25%，並且 25% 應該是數字，而不是字符串。

Answer 1

如果您的輸入是type="number" ，則其值中不能包含非數字字符 (%)。 您可以在輸入中添加 label 以在其后顯示百分號，如下所示。

  <input style="width:40px" type="number" id="myNumericInput" name="myInput"/>
  <label for="myInput" style="font-weight: bold">%</label>

Answer 2

您可以將parseFloat應用於輸入的值，因為它會在遇到 % 符號時立即停止解析。 因此，它前面的數字會被評估。

您已經添加了 % 符號。 當用戶返回該輸入並再次開始編輯時，您可能還想再次刪除它。

如果您願意，您可以制作一個小 jQuery 插件，以便在用戶專注於輸入或遠離它時，添加/刪除 % 符號。

這是一個實時代碼段：編輯和標簽，然后返回輸入元素以查看它的作用。

 // Define jQuery plugin: $.fn.percentage = function () { function clean() { return this.value = this.value.replace(/[^\d.]/g, ""); } this.each(function () { $(this).on("focus", clean).on("blur", function () { if (clean.call(this)) this.value += "%"; }); }); } // Demo // 1. Automatically add/remove %: $("input").percentage(); // 2. Illustrate the use of parseFloat $("input").on("change", function () { console.log(parseFloat($(this).val())); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input>