HTML5 wprowadzenie kodu - ekran w procentach zamiast

dziesiętnych

mogę mieć postać w tym wejść numerycznych które mają oznaczają procenty, które są utworzone w przybliżeniu tak jak poniżej:HTML5 wprowadzenie kodu - ekran w procentach zamiast

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

Obecnie wartości pojawiają się w dziesiętnych na przykład 0,25. Myślę, że byłoby to o wiele bardziej przyjazne dla użytkownika, gdyby liczba wyświetlana w polu tekstowym pokazywała się w procentach. Już wyłączoną wprowadzanie danych z klawiatury na polu za pomocą poniższego kodu jQuery, więc nie martwię się o użytkowników wprowadzających wartości zbójeckie:

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

Czy istnieje prosty sposób na zmianę pól numerycznych, aby wyświetlić procent?

Dziękujemy!

Źródło

2016-06-26 Argus9

Można ustawić min. 0, maks. 100, krok 1 i podzielić wartość w JS na 100 na wyjściu. – makshh

To niezły pomysł. Czy chcesz to zgłosić jako odpowiedź, abym mógł ją wybrać? – Argus9

Może dodać funkcję, liczbę wyjściową (na przykład 0,25) * 100 + "%", w ten sposób zawsze masz ją w procentach.

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

W tym przykładzie numer_pakietowy to liczba na przykład 0,25. Mam nadzieję, że to zadziała.

Źródło

2016-06-26 18:22:35

Są dwa sposoby, które mam nadzieję będą działać.

jeśli chcesz procentowe na wejściu i trzeba przekonwertować go na dziesiętne w js następnie

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

jeśli scenariusz jest odwrócenie następnie

<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; 
}

Źródło

2016-06-26 18:30:24

Spróbuj:

<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>

Źródło

2016-06-26 21:24:41 Ehsan

@ Argus9, Wypróbuj mój kod! – Ehsan

używanie natywnego skrótu CTRL + A do zaznaczenia całej zawartości nie jest już możliwe. Przed zmianą zawartości należy sprawdzić, czy klucz kontrolny (i ewentualnie inne) nie zostanie wyłączony. Również nawigacja po klawiaturze w tekście nie jest możliwa z powodu tego problemu. –

HTML5 wprowadzenie kodu - ekran w procentach zamiast

Odpowiedz

Powiązane problemy