текстовое поле, созданное мопсом, имеет курсор, начинающийся в середине - PullRequest
0 голосов
/ 07 мая 2020

Я создаю форму с помощью 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

Я пробовал установить атрибуты rows и cols, а также ширину и высоту, но проблема сохраняется

1 Ответ

1 голос
/ 07 мая 2020

textarea не является действительным <input> типом . Вместо этого вы должны использовать <textarea> элемент .

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

Также обратите внимание, что атрибут for в <label> элементах должен соответствовать id (не name) элемента формы, который он маркирует.

...