Question

我想知道，为什么在我的聊天应用程序中，每次我发送消息时，textarea都会放置换行符，而不是只关注第一行中的textarea，以便我发送新消息。

让我解释一下video我记录的问题：

在发送第一条hello邮件之前，有placeholder：Your message . . .，然后当我发送hello时，您应该查看textarea，这样您就会清楚地看到占位符不再存在，因为在发送消息之后，我不知道为什么textarea在视频中放置换行符，在我发送消息后几秒钟，占位符再次出现，是因为我按下键盘上的删除键/按钮，以删除文本区域中的换行符或不存在的字符。

我对该元素的所有HTML和CSS都是这个

HTML

<div className="chat-form">
  <textarea className="input-form"
    placeholder="Your message..."
    ref="newMessage"
    onClick={this._onKeyDown}
    autofocus="true" ></textarea>
</div>

CSS

.chat-form {

  ::-webkit-input-placeholder,
  :-moz-placeholder,
  ::-moz-placeholder,
  :-ms-input-placeholder {
    color: #ecf0f1;
    opacity: .4;
  }

  .input-form {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid rgba(192,192,192,0.3);
    color: #fff;
    font-size: 0.7em;
    margin-bottom: 0;
    outline: 0;
    padding: 2% 1% 6% 1%;
    position: relative;
    width: 85%;
  }

  textarea {
    resize: none;
  }
}

和JavaScript部分

  _addMessage () {
    let input = this.refs.newMessage.getDOMNode();
    this.props.onAddMessage(input.value);
    input.value = '';
    input.focus();
  }

Answer 1

你需要在输入时取消keydown事件。

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

提交消息后，textarea上会发生换行符

1 个答案: