Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 13.01.2019, 00:44
Аватар для Brick
Профессор
Отправить личное сообщение для Brick Посмотреть профиль Найти все сообщения от Brick
 
Регистрация: 16.07.2018
Сообщений: 295

j0hnik,
просто хотелось бы number использовать
Ответить с цитированием
  #12 (permalink)  
Старый 13.01.2019, 00:45
Аватар для Brick
Профессор
Отправить личное сообщение для Brick Посмотреть профиль Найти все сообщения от Brick
 
Регистрация: 16.07.2018
Сообщений: 295

в number - maxlength="4"- не работает
Ответить с цитированием
  #13 (permalink)  
Старый 13.01.2019, 06:39
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Brick
мне надо чтоб в поле input ввел 4 цифры и всё
Они прекрасно вводятся

Сообщение от Brick
с number, ни как?
вообще то для этого и предназначен

Сообщение от Brick
в number - maxlength="4"- не работает
Да, оно там не работает, поскольку не понятно, знак минуса тоже учитывать или нет. А если десятичная точка, то её тоже учитывать? Как видите, при использовании input[type="number"] не понятно, что должен делать minlength/maxlength... следует учитывать все знаки числа, или же только целую часть по модулю, или же...

первый вариант решения заключается в использовании атрибутов min, max и step.
<form>
	<input
		type="number"
		min="0"
		max="9999"
		step="1"
		placeholder="Введите 4-значное число..."
		required
	>
</form>

<style>
	input[type="number"] {
		font-size: 300%;
		display: block;
		width: 100%;
		padding: .1em;
		box-sizing: border-box;
		border: 0 solid transparent;
		border-bottom-width: 2px;
		outline: 0;
	}

	input[type="number"]:focus {
		border-color: currentColor;
	}

	input[type="number"]:invalid {
		background-color: #fee;
		color: red;
	}

	input[type="number"]:valid {
		background-color: #efe;
		color: green;
	}
</style>


второй вариант заключается в собственном понимании атрибутов minlength и maxlength. Обратите внимание, что вы можете регулировать количество знаков в натуральном числе(возможно наличие нулей в старшем разряде)
<form>
	<input
		type="number"
		step="1"
		minlength="4"
		maxlength="4"
		placeholder="Введите 4-значное число..."
		required
	>
</form>
<script>
	
addEventListener("input", ({ target }) => {
	if(!target.matches("input[type='number']")) return;
	if(Number.isNaN(target.minLength) || Number.isNaN(target.maxLength)) return;

	target.value = target.value.replace(/\D/g, "").slice(0, target.maxLength);
	target.setCustomValidity(
		target.value.match(
			new RegExp(`^\\d{${target.minLength},${target.maxLength}}$`)
		) ?
			'' : 'Введите 4-значное число'
	);
});
		
</script>
<style>
	input[type="number"] {
		font-size: 300%;
		display: block;
		width: 100%;
		padding: .1em;
		box-sizing: border-box;
		border: 0 solid transparent;
		border-bottom-width: 2px;
		outline: 0;
	}

	input[type="number"]:focus {
		border-color: currentColor;
	}

	input[type="number"]:invalid {
		background-color: #fee;
		color: red;
	}

	input[type="number"]:valid {
		background-color: #efe;
		color: green;
	}
</style>
Ответить с цитированием
  #14 (permalink)  
Старый 13.01.2019, 10:40
Аватар для Brick
Профессор
Отправить личное сообщение для Brick Посмотреть профиль Найти все сообщения от Brick
 
Регистрация: 16.07.2018
Сообщений: 295

Malleys,
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
Как упростить функцию makissm21 Общие вопросы Javascript 5 20.03.2015 08:36
Как упростить этот код при использовании jquery ? Нубопрогер Элементы интерфейса 3 15.02.2015 07:20
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 12:34
Подскажите плизз как можно упростить код frolvict Общие вопросы Javascript 19 08.04.2010 14:23