О форме с единственным textarea
В многострочном textarea использование в качестве сигнала отправки формы копки Enter⏎ не позволяет использовать этот самый многострочный ввод... Обычно для этой цели на настольном компьютере с клавиатурой или ноутбуке используют Cmd+Enter, но тогда пользователи сенсорных устройств не смогут отправить такую форму.
Т. е. *дополнительная* кнопка для отправки нужна, поскольку тогда пользователи знают, какое они совершат действие с введённым текстом. (По крайней мере у них не сложится впечатление, что достаточно ввести текст...)
Также пользователи, которые привыкли к удобному заполнению форм, введя текст, смогут нажать Tab⭾ и сфокусировавшись на кнопке, нажать на Enter⏎
Пользователи сенсорных устройств всё-таки смогут отправить форму, нажав на кнопку.
Ну и пример. Форма с единственным textarea.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример формы с многострочным вводом</title>
<meta name="viewport" content="width=device-width">
<style>
button, form, textarea {
color: deepskyblue;
border: 1px solid;
background: transparent;
border-radius: 1em;
padding: 0;
font: inherit;
display: inline-block;
box-sizing: border-box;
padding: .5em 1em;
outline: 0;
}
button:focus, form:focus, textarea:focus {
box-shadow: 0 0 0 .1em, 0 0 1em;
}
form {
position: relative;
min-width: 100%;
padding: 0;
}
button {
position: absolute;
bottom: .5em; right: .5em;
}
textarea {
width: 100%; height: 100%;
display: block;
border: none;
min-height: 8em;
resize: vertical;
}
</style>
</head>
<body>
<form onsubmit="submitHandler(this); return false;">
<textarea
onkeydown="submitForm(this.form);"
title="Нажмите ⌘⏎ или ⌃⏎ чтобы отправить"
placeholder="Введите Ваш комментарии..."
></textarea>
<button>Отправить</button>
</form>
<script>
function submitForm(form) {
if(
(event.ctrlKey || event.metaKey) &&
event.keyCode === 13
) {
submitHandler(form);
}
}
function submitHandler(form) {
// действие, которое совершается при отправке формы
alert(form.elements[0].value);
}
</script>
</body>
</html>
Выводы:
1. ⏎ для перевода строки, ⌘⏎ или ⌃⏎ чтобы отправить
2. кнопка нужна: ⭾⏎ чтобы отправить; явно нажать
