Nuxt3:为什么这个文本输入元素不尊重maxlength属性

Question

我正在使用Nuxt3，由于某种原因，下面HTML输入元素中指定的maxlength="70"属性不受尊重(我可以键入70多个字符(。有人知道为什么吗？

<input
type="text"
class="form-control"
id="title"
placeholder="title"
v-model.trim="formData.title"
required
maxlength="70"
aria-describedby="titleCount"
/>

我可以在这里用最小的产量复制这一点：https://stackblitz.com/edit/nuxt-starter-kmrpo9?file=app.vue

完整代码：

<template>
<section>
<div class="card border-0">
<div class="row g-0">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<main class="card-body">
<form class="mt-3 mt-lg-0" @keydown.enter.prevent="">
<div class="form-floating mb-3">
<input
type="text"
class="form-control"
id="title"
placeholder="title"
v-model.trim="formData.title"
required
maxlength="70"
aria-describedby="titleCount"
/>
<div id="titleCount" class="form-text">
{{ titleLimit - formData.title.length }}
characters remaining
</div>
<label for="title">Title</label>
</div>
</form>
</main>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
const props = defineProps({
post: {
type: Object,
default: () => ({
caption: '',
title: '',
content: '',
source: '',
tags: [],
imageFileName: '',
imagePath: '',
width: null,
height: null,
}),
},
});
const formData = reactive({ ...props.post });
// Limit the number of title characters to 70
const titleLimit = computed(() => {
const limit = 70;
const titleLength = formData.title.length;
return limit - titleLength;
});
</script>

Answer 1

由于您在这里使用v-model.trim="formData.title"，由于Vue的强大功能，您可能会覆盖HTML标记的默认行为。

删除该字符，或者自己处理逻辑，不允许用户键入更多字符，而是使用Vue，例如使用@input检查长度。

---

这是您的工作演示示例。

<template>
<section>
<div class="card border-0">
<div class="row g-0">
<div class="col-lg-4"></div>
<div class="col-lg-8">
<main class="card-body">
<form class="mt-3 mt-lg-0" @keydown.enter.prevent="">
<div class="form-floating mb-3">
<input
type="text"
class="form-control"
id="title"
placeholder="title"
:value="formData.title"
@input.trim="updateIfPossible"
required
maxlength="70"
aria-describedby="titleCount"
/>
<div id="titleCount" class="form-text">
{{ titleLimit }}
characters remaining
</div>
<label for="title">Title</label>
</div>
</form>
</main>
</div>
</div>
</div>
</section>
</template>
<script setup lang="ts">
const props = defineProps({
post: {
type: Object,
default: () => ({
caption: '',
title: '',
content: '',
source: '',
tags: [],
imageFileName: '',
imagePath: '',
width: null,
height: null,
}),
},
});
const formData = reactive({ ...props.post });
// Limit the number of title characters to 70
const titleLimit = computed(() => {
const limit = 70;
const titleLength = formData.title.trim().length;
return limit - titleLength;
})
function updateIfPossible(e) {
if (formData.title.trim().length > 70) return 
formData.title = e.target.value
}
</script>