我使用的是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>
1条答案
按热度按时间kh212irz1#
因为这里使用的是
v-model.trim="formData.title"，所以借助Vue的强大功能，可能会覆盖HTML标记的默认行为。要么删除那个，要么自己处理逻辑，不允许用户在Vue中键入更多字符，例如，使用
@input检查长度。下面是您的示例作为工作演示。