REACT - Предотвращение ввода после запятой после 2 знаков после запятой достигнуто

Question

У меня есть поле ввода в компоненте. Я хочу, чтобы пользователь не мог добавлять какой-либо вход, если значение поля ввода содержит более двух десятичных знаков.

E.g. если пользователь вводит 10.95 Я не хочу позволять им писать что-нибудь еще после этого значения. Они все равно могут обновить его до 101.95, но он должен помешать добавлению любого ввода после окончательного десятичного знака.

Код, который я до сих пор ниже.

class inputBox extends Component { 

    countDecimals(value) { 
     if(Math.floor(value) === value) return 0; 
     return value.toString().split(".")[1].length || 0; 
    } 

    updateValue(e) { 
     if(this.countDecimals(e.target.value) > 2) { 
      //prevent user from inputting into box after the decimal place... 
     } 
    } 

    render() { 
     return(
      <input type='text' onChange={this.updateValue} /> 
     ) 
    } 
} 

Answer 1

document.getElementById("yourinput").oninput=function(){ 
    this.value=this.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join("."); 
}; 

Заменить значение с новым значением, то сокращается до двух символов после каждой точки. http://jsbin.com/soretokuse/1/edit

Answer 2

Думаю, вам нужно сохранить старую ценность, которая должна работать.

var input=document.getElementById('input'), 
 
    countDecimals=function(value) { 
 
    if(Math.floor(value) === value) return 0; 
 
    if(value.toString().split(".")[1]) 
 
    return value.toString().split(".")[1].length || 0; 
 
}, 
 
    updateValue=function(val) { 
 
    if(countDecimals(val) > 2) { 
 
     input.value=input.getAttribute('oldValue'); 
 
    } 
 
}; 
 

 
input.oninput=function(){ 
 
    updateValue(this.value); 
 
    input.setAttribute('oldValue',this.value); 
 
}

<input id="input" type="text"/>

Answer 3

Насколько мне известно, в Javascript и HTML идет не 'простое решение' для этого. Работа с «сырыми» формами JS и ExtJs узнала меня, что существует несколько способов фокусировки и управления полем. Это затрудняет манипулирование внутренним значением в нужное время.

Так что позвольте мне разделить проблему на несколько проблем. Что я буду пытаться решать:

Срабатывание

Вы хотите, чтобы ваша логика бежать во все времена что-то происходит на поле. Следующая ссылка предоставляет вам варианты: http://www.w3schools.com/TAGS/ref_eventattributes.asp

При использовании OnChange она будет срабатывать, когда кто-то изменяет значения после вы стираете поле (вы щелкните вкладку или вдали от поля). Так что это не хорошо.

Вы можете попробовать ключевые события (вверх, вниз, нажать). Но это исключает, когда вы вставляете значение.

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

Мое решение заключается в том, чтобы запустить таймер, когда вы фокусируете поле и проверяете значение и выполняете дальнейшую логику. И завершите все, что вы хотели сделать на размытие.

Определение правильности значения

Вы могли бы написать какой-нибудь ловкий регулярное выражение или один оператор линии, который говорит вам, если значение является правильным. В конце концов, все равно, это должно соответствовать вашим потребностям.

Так что-то вроде:

var inputVar = element.value; 
var inputFloat = parseFloat(inputVar); 
var normalizeInput = Math.round(inputFloat * 100)/100; 
if(inputFloat > 0 && normalizeInput == inputFloat){ 
    #correct value 
}else{ 
    #incorrect value 
} 

Handling правильного/неправильного ввода

Теперь вы хотите обрабатывать ввод пользователя и сделать что-то. Такие вещи, как установка поля для отключения или чтения, будут препятствовать дальнейшим вводам и изменениям, но не позволят вашим пользователям ничего делать в вашем поле.

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

Так что оставляет вас с 2-х вариантов:

Редактирование содержимого поля непосредственно перекрывая element.value с требуемым значением.

Управление вводами/выборами клавиш, чтобы попытаться удерживать курсор в том же положении, когда пользователь оставил его, исправляя ложный ввод.

Я бы выбрал первое, поскольку это намного меньше хлопот, хотя это может испортить позицию курсора (зависит от браузера).

Окончательное внедрение

Так что я предлагаю, объединив все выше:

В фокусе вы начинаете работает SetTimeout или setInterval http://www.w3schools.com/jsref/met_win_settimeout.asp http://www.w3schools.com/jsref/met_win_setinterval.asp

В функции запуска затем, проверив если установлено предыдущее значение.

В первый раз это НЕ так: Вы должны где-то удержать это предыдущее значение, вы можете держать его в переменной внутри javascript или помещать в поле DOM.

http://www.w3schools.com/jsref/met_element_setattribute.asp

var inputElement.setAttribute('old_value', oldValue); 

Теперь вы проверить, если это значение правильно, прежде чем сохранить его, иначе просто настроить его обратно пустые (или пытаться нормализовать значение то, что проверяет, вы могли бы держать убирание символов в например, право).

Теперь при каждом запуске вы проверяете правильность значения. Если значение верное, вы сохраняете новое значение как «новое» предыдущее значение (и снова вызываете setTimeout, если используете этот метод).

Если это неверно, вы записываете старое значение или пытаетесь нормализовать входное значение, и если это не удается использовать последнее правильное значение.

На размытый случае вы освобождаете SetTimeout или setInterval работает в фоновом режиме: http://www.w3schools.com/jsref/met_win_cleartimeout.asp http://www.w3schools.com/jsref/met_win_clearinterval.asp

(В качестве альтернативы вы можете проверить, если document.activeElement такой же, как тот, который запускается на этой «петли «поэтому он знает, когда остановиться).

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

PLAN B

Используйте HTML5 ввода номера поля:

HTML 5 input type="number" element for floating point numbers on Chrome

Try <input type="number" step="0.01" /> if you are targeting 2 decimal 
places :-). 

edited Apr 27 '15 at 18:10 
Andre Figueiredo 

Который работает только в браузерах, которые поддерживают его.

Answer 4

Вы можете использовать компонент, управляемый реакцией, и привязать состояние к атрибуту ввода atrribute. Тогда будет выглядеть обработчик событий onChange.

updateValue(e) { 
     this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")}) 
    } 

Работал для меня.