в настоящее время у меня есть следующий код
<input type="number" />
он приходит к чему-то вроде этого
Маленькая селекторная вещь справа позволяет номеру перейти в отрицательный. Как это предотвратить?
У меня возникают сомнения по поводу использования type="number", это вызывает больше проблем, чем решение, я собираюсь проверить, так или иначе, так что я должен просто вернуться к использованию type="text"?
Добавьте атрибут min
<input type="number" min="0">Я нашел другое решение для предотвращения отрицательного числа.
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
Это зависит от того, насколько вы точны. Это вы хотите принять только целые числа, чем:
<input type="number" min="1" step="1"> Вы можете заставить ввод содержать только положительное целое число, добавив onkeypress внутри тега input.
<input type="number" onkeypress="return event.charCode >= 48" min="1" >Try
<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
Вы можете использовать следующее, чтобы type="number" принимал только положительные числа:
input type="number" step="1" pattern="\d+"
Я не могу найти идеальное решение, так как некоторые работы для ввода, но не для копирования и вставки, некоторые наоборот. Это решение работает для меня. Он защищает от отрицательного числа, набирает "e", копирует и вставляет текст "e".
создать функцию.
<script language="JavaScript">
// this prevents from typing non-number text, including "e".
function isNumber(evt) {
evt = (evt) ? evt : window.event;
let charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
}
</script>
добавить эти свойства для ввода. эти два препятствуют копированию и вставке нечислового текста, включая "е". чтобы они вступили в силу, вам нужно иметь их вместе.
<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />
Если вы используете Vue , вы можете найти ответ здесь. Я извлек его в миксин, который можно использовать повторно.
добавьте этот код в свой тип ввода;
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
например:
<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
Другое решение состоит в том, чтобы использовать Js, чтобы сделать его положительным (опция min может быть отключена и недопустима, когда пользователь вводит что-то). Отрицательное, если в этом нет необходимости, также можно использовать событие on ('keydown')!
let $numberInput = $('#whatEverId');
$numberInput.on('change', function(){
let numberInputText = $numberInput.val();
if(numberInputText.includes('-')){
$numberInput.val(Math.abs($numberInput.val()));
}
});
Это зависит от того, хотите ли вы int или float. Вот как бы они выглядели:
<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">
К полю int прикреплена правильная проверка, так как его минимум равен 1. Однако, поле с плавающей запятой принимает 0; Чтобы справиться с этим, вы можете добавить еще один валидатор ограничений:
function checkIsPositive(e) {
const value = parseFloat(e.target.value);
if (e.target.value === "" || value > 0) {
e.target.setCustomValidity("");
} else {
e.target.setCustomValidity("Please select a value that is greater than 0.");
}
}
document.getElementById("float-field").addEventListener("input", checkIsPositive, false);
Обратите внимание, что ни одно из этих решений полностью не запрещает пользователю вводить неверный ввод, но вы можете вызвать checkValidity или reportValidity чтобы выяснить, набрал ли пользователь допустимый ввод.
Конечно, у вас все еще должна быть проверка на стороне сервера, потому что пользователь всегда может игнорировать проверку на стороне клиента.
<input type="number" min="1" step="1">Попробуйте это. Отлично работает. Дополнительный код JavaScript не требуется.
onkeypress="return event.charCode
поместите это в свой тег ввода. как это.
<input type="number" min="0" max="" onkeypress="return event.charCode >= 48" class="form-control" placeholder="Enter number(0-10)">
Спасибо.
С типом ввода текста вы можете использовать это для лучшей проверки,
return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();
Если требуется ввод текста, шаблон работает также
<input type="text" pattern="\d+">
Попробуй это:
Yii2 : Validation rule
public function rules() {
return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
];
}