Почему maxlenght не работает в number?

Question

[Erl]

В попытке найти максимально короткий путь для обозначения максимальной длины инпута нашел такой пример, но есть проблема, всё работает пока input type="text"

<input type="text" class="form-control" placeholder="Build Something Awesome" :maxlength="max" v-model="text" />

но когда type="number", то уже не работает, почему так происходит?

<input type="number" class="form-control" :maxlength="max" v-model="text1" />

Answer 1

[0xD34F]

Потому что так задумано. Вообще, чаще читайте документацию, ясно же сказано, для кого этот атрибут действителен - список короткий, и number в нём отсутствует:

Valid for text, search, url, tel, email, and password

Вешайте watch на свойство, используемое в v-model, и там исправляйте значение, если нужно. Если есть необходимость делать подобное многократно, для разных input'ов, напишите соответствующую директиву.

Comments

[Erl]

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

<input type="number" placeholder="0" v-model.number="atack" v-on:keyup="updateValue" />
<input type="number" placeholder="0" v-model.number="atack_awa" v-on:keyup="updateValue" />
<input type="number" placeholder="0" v-model.number="def" v-on:keyup="updateValue" />

updateValue(event) {
      let value = event.target.value
      if (String(value).length > 3) {
        value = value.slice(0, 3)
      }
      this.$forceUpdate()
},

Но есть новая проблема)
у меня 3 инпута, собственно 3 v-model.number, тут я беру их value и собственно его изменяю, но сам this.atack (к примеру) изменить не могу, либо надо прописывать для каждого инпута отдельно, может есть какой то способ изменить их?

Хотелось бы сделать какой то универсальный метод, что бы можно было применять к любому инпуту

[0xD34F]

Убил бы. Перечитайте ответ, и на этот раз попробуйте понять, что там написано.

UPD. Добавил ссылки на примеры.

Answer 2

[Дмитрий Гололобов]

в input number есть аттрибут max - максимальное число, которое можно в него внести.
Плюс есть параметр step - шаг изменения числа нажатием стрелок
Также есть min

Comments

[Erl]

То есть суть вопроса не понятна?
мне нужно ограничить ввод максимального количества цифр, допустим ввод только 3х цифр, аттрибут max, будет работать если нажимать стрелочки, а ввод происходит в основном с клавиатуры

[Kutuzov_ska]

Erl, Попробуйте к v-model добавить модификатор .number, v-model.number, или как вариант, если вам надо максимум 3 цифры max="999"

[Erl]

Kutuzov_ska, я пробовал, это не помогает
я решил сделать это через метод, просто резать последние символы, если они больше 3х

<input type="number" placeholder="0" v-model.number="atack" v-on:keyup="updateValue" />
<input type="number" placeholder="0" v-model.number="atack_awa" v-on:keyup="updateValue" />
<input type="number" placeholder="0" v-model.number="def" v-on:keyup="updateValue" />

updateValue(event) {
      let value = event.target.value
      if (String(value).length > 3) {
        value = value.slice(0, 3)
      }
      this.$forceUpdate()
},

Но есть новая проблема)
у меня 3 инпута, собственно 3 v-model.number, тут я беру их value и собственно его изменяю, но сам this.atack (к примеру) изменить не могу, либо надо прописывать для каждого инпута отдельно, может есть какой то способ изменить их?

Хотелось бы сделать какой то универсальный метод, что бы можно было применять к любому инпуту

[Kutuzov_ska]

Erl, Делайте по другому. Попробуйте по другому. v-model.number="atack"

v-on:keyup уберите
добавьте

watch : {
  'atack' () {
    if (('' + this.atack ).length > 3) {
      let tmp = ('' + this.atack).slice(0,3)
      this.atack = Number(tmp)
    }
  }
}

Могут быть грамматические ошибки:)

[Erl]

Kutuzov_ska, это круто), спасибо

[Erl]

Kutuzov_ska, а можно ли в watch, следить не за 'atack', а за любым input, у которого есть какой аттрибут

[Kutuzov_ska]

Erl,

<template>
	<div>
		<input class="input" type="number" @input.number="hook($event, 'atack1')">
		<input class="input" type="number" @input.number="hook($event, 'atack2')">
	</div>
</template>

<script>
export default {
	data: () => ({
		atack1: '',
		atack2: ''
	}),
	methods: {
		updateNumber (num) {
			let str = '' + num;
			if (str.lenght > 3) str = str.slice(0,3);

			return Number(str);
		},
		hook(e, variable) {
			let num = e.target.value;
			this[variable] = this.updateNumber(num);
		}
	},
	watch: {
		'atack1' () {
			console.log('update atack1', this.atack1);
		},
		'atack2' () {
			console.log('update atack2', this.atack2);
		}
	}
}
</script>

Логика такая - пишете метод, с помощью @input отслеживаете (это лучше нажатия клавиш, например клавиши не сработают при копировать - вставить и т.д.), Первым аргументом событие, вторым переменную которую зотите обновить.

watch - добавил чтобы можно было видеть изменения

[Erl]

Kutuzov_ska, спасибо