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>