HTML5號輸入 - 顯示爲百分比，而不是小數

我有一個形式，包括那些被認爲表示百分比數目的輸入，這是設置約象下面這樣：HTML5號輸入 - 顯示爲百分比，而不是小數

<input type="number" min="0" max="1" step="0.01" />

目前，值顯示爲小數，例如0.25。如果顯示在文本字段中的數字以百分比形式顯示，我認爲它會更加方便用戶。我一直在使用下面的jQuery代碼領域已經禁用鍵盤輸入，所以我不擔心用戶輸入流氓值：

$('input[type="number"]').keypress(function (field) { 
    field.preventDefault(); 
});

有一種簡單的方法來改變號碼字段顯示比例是多少？

謝謝！

來源

2016-06-26 Argus9

您可以將min設置爲0，最大值爲100，step to 1並將輸出中的JS值除以100。 – makshh

這是個好主意。你想提交作爲答案，所以我可以選擇它嗎？ – Argus9

也許添加一個函數，輸出的數字（例如0.25）* 100 +「％」，這樣你總是以百分比表示。

function topercentage() { 
    var outputnumber = outputnumber * 100 + "%"; 
}

在本例中，outputnumber是例如0.25的數字。我希望這可以工作。

來源

2016-06-26 18:22:35

有兩種方法，我希望將工作。

如果你想在輸入百分比，需要將其轉換爲小數在JS然後

<input type="number" min="1" max="100" id="myPercent"/> 
in js 
document.getElementById('myForm').onsubmit = function() { 
    var valInDecimals = document.getElementById('myPercent').value/100; 
}

如果情況是反向然後

<input type="number" min="0" max="1" step="0.01" id="myPercent"/> 
in js 
document.getElementById('myForm').onsubmit = function() { 
    var valInDecimals = document.getElementById('myPercent').value * 100; 
}

來源

2016-06-26 18:30:24

試試：

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <input type="text" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
     <script> 
 
      $('input[type="text"]').keyup(function(e) { 
 
       var num = $(this).val(); 
 
       if (e.which!=8) { 
 
        num = sortNumber(num); 
 
        if(isNaN(num)||num<0 ||num>100) { 
 
         alert("Only Enter Number Between 0-100"); 
 
         $(this).val(sortNumber(num.substr(0,num.length-1)) + "%"); 
 
        } 
 
       else 
 
        $(this).val(sortNumber(num)+"%"); 
 
       } 
 
       else { 
 
        if(num < 2) 
 
         $(this).val(""); 
 
        else 
 
         $(this).val(sortNumber(num.substr(0,num.length-1)) + "%"); 
 
       } 
 
      }); 
 
      function sortNumber(n){ 
 
       var newNumber=""; 
 
       for(var i = 0; i<n.length; i++) 
 
        if(n[i] != "%") 
 
         newNumber += n[i]; 
 
       return newNumber; 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

來源

2016-06-26 21:24:41 Ehsan

@ Argus9，試試我的代碼！ – Ehsan

使用本機CTRL +無法再使用所有內容選擇的快捷方式。在更改內容之前，您應該檢查控制鍵（可能還有其他人喜歡它）。由於該問題，文本內部的鍵盤導航也不再可能。 –

HTML5號輸入 - 顯示爲百分比，而不是小數

回答

相關問題