javascript - Autofocus of Draftjs test editor - Stack Overflow

admin管理员组

文章数量:1341686

How can I ensure that the sole draft-js textbox on my UI autofocuses on page load?

There is a documented method called focus, however I am unsure of the syntax required for implementation.

How can I ensure that the sole draft-js textbox on my UI autofocuses on page load?

There is a documented method called focus, however I am unsure of the syntax required for implementation.

• javascript
• reactjs
• draftjs

Share Improve this question Follow asked Mar 24, 2017 at 17:43 WΔ_WΔ_ 1,25944 gold badges2020 silver badges3939 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

If your editor is initiated with some default value then doing just this.refs.editor.focus() will have cursor at starting of the text. So to move cursor to the end we need to do something like this in ponentDidMount

  ponentDidMount() {
    this.setState({
      editorState:  EditorState.moveFocusToEnd(this.state.editorState), // EditorState imported from draft-js
    });
  }

https://github./draft-js-plugins/draft-js-plugins/blob/master/draft-js-plugins-editor/src/Editor/moveSelectionToEnd.js -- link to the method

see here

basically, you'd do something like

<Editor ref="someRef" />

and

ponentDidMount = () => {
    this.refs.someRef.focus();
}

本文标签： javascriptAutofocus of Draftjs test editorStack Overflow