Nuxt3：为什么这个文本输入元素不尊重 maxlength 属性？答案

【问题标题】：Nuxt3: Why does this text input element not respect the maxlength attribute?Nuxt3：为什么这个文本输入元素不尊重 maxlength 属性？
【发布时间】：2022-11-04 19:15:32
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： twitter-bootstrap vuejs3 nuxtjs3

【解决方案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>

【讨论】：