pug 生成的 textarea 光标从中间开始

Posted 2023-05-07

【中文标题】pug 生成的 textarea 光标从中间开始

【英文标题】：textarea generated by pug has cursor starting in the middle

【发布时间】：2020-08-23 01:19:20

【问题描述】：

我正在使用 Pug 创建一个表单，在生成的文本区域中，光标从中间而不是左上角开始。我见过类似的问题，问题是开始和结束输入标签之间的空格，但对我来说不是这样，因为我没有直接编写 html。

admin.pug：

form.basic#alertEditor(name="alertEditor" v-on:submit.prevent="createAlert" autocomplete="off")
    label(for="title") Title
    input(type="text", name="title", v-model="title", required)
    label(for="startDate") Start Date
    input(type="date", name="startDate", v-model="startDate", required)
    label(for="endDate") End Date
    input(type="date", name="endDate", v-model="endDate", required)
    label(for="desc") Description
    input(type="textarea", name="desc", v-model="desc" required)

style.sass

form.basic
  display: block
  input:not([type="radio"]), label:not([for="alert"]):not([for="detour"]), select
    display: block
  input, select
    margin-bottom: 1em
    font-family: "museo-sans", sans serif
    border-radius: 4px
  select
    padding: 0.5em 1em
    font-size: 1.05em
  input
    padding: 1em
  input[type="text"],input[type="date"],input[type="password"],input[type="email"]
    border: 2px solid $tertiary
    width: 100%
  input[type="textarea"]
    border: 2px solid $tertiary
    width: 50%
    height: 150px

我已尝试设置行和列属性以及宽度和高度，但问题仍然存在

【参考方案1】：

textarea 不是valid <input> type。您应该改用<textarea> element。

label(for='desc') Description
textarea#desc(name='desc', v-model='desc', required)

另外，请注意<label> elements 上的for 属性应该与它所标记的表单元素的id（而不是name）匹配。

【讨论】：

谢谢！不敢相信这是这么简单的事情。我应该知道

@PaulMcDowell 我以前也犯过这个错误