Textfield文字居中插入及阻止Enter提交后无法换行问题求助

问题1：文本输入在输入区域中间位置 #

原因 #

你用了<input type="textfield">，但HTML里根本没有textfield这个input类型，而且input是单行输入控件，哪怕设置高度，文本默认也是垂直居中显示。要实现多行输入且文本从顶部开始，得用<textarea>标签。

解决办法 #

1. 把JSX里的input替换成textarea（注意JSX里要用className替代class）：

<textarea className="form-control" id="text" name="comment"></textarea>

2. 保留现有CSS即可，也可按需添加优化项：

.form-control {
    height: 300px;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    resize: vertical; /* 允许用户垂直调整高度，可选 */
}

问题2：阻止Enter提交表单但无法换行 #

原因 #

当前的handleKeyPress会拦截所有Enter按键行为，包括textarea里的换行操作，导致无法正常换行。

解决办法 #

修改函数，判断触发事件的元素是否为textarea，是就允许换行，否则阻止表单提交：

const handleKeyPress = (event) => {
    // 是textarea就放行，允许换行
    if (event.target.tagName === 'TEXTAREA') {
        return;
    }
    // 其他输入框阻止Enter提交
    if (event.key === 'Enter') {
        event.preventDefault();
        return false;
    }
}

如果想实现「textarea里普通Enter换行，Ctrl+Enter提交表单」，可以用这个版本：

const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
        // Ctrl+Enter时触发表单提交
        if (event.ctrlKey) {
            event.target.form.submit();
        } else {
            // textarea里允许换行，不拦截
            if (event.target.tagName === 'TEXTAREA') {
                return;
            }
            // 其他输入框阻止提交
            event.preventDefault();
            return false;
        }
    }
}

内容的提问来源于stack exchange，提问作者MexcelsiorB