Формат изображения с угловым номером

Я хочу использовать отформатированный ввод числа, чтобы показывать тысяча точек seperator пользователю, когда он набирает большие числа. Вот код директивы, который я использовал: http://jsfiddle.net/LCZfd/3/

Когда я использую input type="text", он работает, но когда я хочу использовать input type="number", он странно чистится чем-то, когда пользователь печатает большие числа.

Что такое проблема input[number]?

Ответы

Ответ 1

Как написано в комментариях, input type="number" не поддерживает ничего, кроме цифр, десятичный разделитель (обычно , или ., в зависимости от языкового стандарта) и - или e. Вы все равно можете вводить все, что хотите, но браузер отменит любой неизвестный/неправильный символ.

Это дает вам два варианта:

  • используйте type="text" и проверку шаблонов, например pattern="[0-9]+([\.,][0-9]+)*", чтобы ограничить ввод пользователем при автоматическом форматировании значения, как в вашем примере
  • помещает надпись поверх входного поля, который отображает номера так, как вы хотите, и по-прежнему позволяет пользователю использовать настраиваемые элементы управления type="number", например показанные здесь

В последнем решении используется дополнительный тег <label>, который содержит текущее значение и скрыт через CSS, когда вы фокусируете поле ввода.

Ответ 2

Вам нужно добавить атрибут step к вашему входу number.

<input type="number" step="0.01" />

Это позволит использовать плавающие точки.

http://jsfiddle.net/LCZfd/1/

Кроме того, я бы рекомендовал просмотреть поток ошибок на входах number в Firefox. Возможно, вы захотите рассмотреть возможность использования этого типа ввода, поскольку он был окончательно поддержан в этом выпуске FF.

Ответ 3

Вы не можете использовать значения с ,, потому что type=number принимает только числа, добавление запятой делает его строкой.

См. http://jsfiddle.net/LCZfd/5

Вам лучше сделать свой собственный контроль, если вы хотите запятые. Один с истинным значением (числом) и отображаемым значением (строка).

Ответ 4

вы можете попробовать это, я изменил директиву, которую я видел здесь... Как ограничить ввод только для принятия чисел?...

здесь измененная директива, которую я сделал... Эта директива использует событие keyup для изменения ввода на лету...

.directive('numericOnly', function($filter) {
 return {
  require: 'ngModel',
  link: function(scope, element, attrs, modelCtrl) {

       element.bind('keyup', function (inputValue, e) {
         var strinput = modelCtrl.$$rawModelValue;
         //filter user input
         var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null;
         //remove trailing 0
         if(transformedInput.charAt(0) <= '0'){
           transformedInput = null;
           modelCtrl.$setViewValue(transformedInput);
           modelCtrl.$render();
         }else{
           var decimalSplit = transformedInput.split(".")
           var intPart = decimalSplit[0];
           var decPart = decimalSplit[1];
           //remove previously formated number
           intPart = intPart.replace(/,/g, "");
           //split whole number into array of 3 digits
           if(intPart.length > 3){
             var intDiv = Math.floor(intPart.length / 3);
             var strfraction = [];
             var i = intDiv,
                 j = 3;

             while(intDiv > 0){
               strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3));
               j=j+3;
               intDiv--;
             }
             var k = j-3;
             if((intPart.length-k) > 0){
               strfraction[0] = intPart.slice(0,intPart.length-k);
             }
           }
           //join arrays
           if(strfraction == undefined){ return;}
             var currencyformat = strfraction.join(',');
             //check for leading comma
             if(currencyformat.charAt(0)==','){
               currencyformat = currencyformat.slice(1);
             }

             if(decPart ==  undefined){
               modelCtrl.$setViewValue(currencyformat);
               modelCtrl.$render();
               return;
             }else{
               currencyformat = currencyformat + "." + decPart.slice(0,2);
               modelCtrl.$setViewValue(currencyformat);
               modelCtrl.$render();
             }
         }
        });
  }

};

вы используете его вот так:

<input type="text" ng-model="amountallocated" id="amountallocated" numeric-only />