Ввод номера HTML5 - отображение в процентах вместо десятичного

У меня есть форма, включающая числовые входы, которые должны представлять проценты, которые настроены примерно так:

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

В настоящее время значения отображаются как десятичные числа, например, 0,25. Я думаю, что было бы намного удобнее, если бы число, отображаемое в текстовом поле, отображалось как процент. Я уже отключил ввод с клавиатуры в поле, используя приведенный ниже код jQuery, поэтому я не беспокоюсь о том, что пользователи вводят значения изгоев:

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

Есть ли простой способ изменить числовые поля для отображения процента?

Спасибо!

Ответы

Ответ 1

Есть два способа, которые, я надеюсь, сработают.

Если вы хотите ввести проценты во входных данных и хотите преобразовать их в десятичные числа в js, тогда:

<input type="number" min="1" max="100" id="myPercent"/>

в 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"/>

в js:

document.getElementById('myForm').onsubmit = function() {
    var valInDecimals = document.getElementById('myPercent').value * 100;
}

Ответ 2

Возможно, добавьте функцию, выведенное число (например, 0.25) * 100 + "%", таким образом вы всегда будете иметь его в процентах.

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

В этом примере outputnumber - это число, например, 0.25. Надеюсь, это сработает.

Ответ 3

Попробуйте:

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

Ответ 4

Хотя это не HTML5 input type = 'number', решение ниже использует input type = 'text' с тем же эффектом. Для рационального использования type = 'number' в качестве людей требуется красиво отформатированная строка, например "23,75%", в то время как роботы предпочитают читать целые числа, и следует избегать плавающих точек. Ниже приведен фрагмент кода с точностью до 2 знаков после запятой.

Я не тестировал его на мобильном телефоне, но я думаю, что цифровая клавиатура должна отображаться как с типом ввода = "число".

Codepen.io: Скомментированный код можно найти здесь

document.querySelector('.percent').addEventListener('input', function(e) {
  let int = e.target.value.slice(0, e.target.value.length - 1);

  if (int.includes('%')) {
    e.target.value = '%';
  } else if (int.length >= 3 && int.length <= 4 && !int.includes('.')) {
    e.target.value = int.slice(0, 2) + '.' + int.slice(2, 3) + '%';
    e.target.setSelectionRange(4, 4);
  } else if (int.length >= 5 & int.length <= 6) {
    let whole = int.slice(0, 2);
    let fraction = int.slice(3, 5);
    e.target.value = whole + '.' + fraction + '%';
  } else {
    e.target.value = int + '%';
    e.target.setSelectionRange(e.target.value.length - 1, e.target.value.length - 1);
  }
  console.log('For robots: ' + getInt(e.target.value));
});

function getInt(val) {
  let v = parseFloat(val);
  if (v % 1 === 0) {
    return v;
  } else {
    let n = v.toString().split('.').join('');
    return parseInt(n);
  }
}

<input class="percent" type="text" value="23.75%" maxlength="6">