Wie wähle ich den gesamten Text aus, der mit Reactjs eingegeben wurde, wenn er fokussiert war?


Antworten:


179

Functional component::

const handleFocus = (event) => event.target.select();
const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />

ES6 class component::

class Input extends React.Component {
    handleFocus = (event) => event.target.select();

    render() {
        return (
            <input type="text" value="Some something" onFocus={this.handleFocus} />
        );
    }
}

React.createClass::

React.createClass({
    handleFocus: function(event) {
      event.target.select();
    },

    render: function() {
      return (
        <input type="text" value="Some something" onFocus={this.handleFocus} />
      );
    },
})

1
Dies funktioniert in reiner Funktion (keine Klasse), danke für diese Lösung.
Jan Jarčík

11
Kann ohne die Notwendigkeit der zusätzlichen Funktion weiter vereinfacht werden, falls es nur für ein Feld in der Klasse ist:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123

3
@ TK123 Sie sollten Pfeilfunktionen in Ihren Rendermethoden vermeiden . Es verletzt auch jsx-no-bind das beispielsweise von eslint-config-airbnb verwendet wird .
Dschu

1
Wie bringe ich das zum Laufen? disabled Textfeld Laufen? jsfiddle.net/69z2wepo/317733
Rahul Desai

3
@RahulDesai Anstatt disabled, VerwendungreadOnly : jsfiddle.net/kxgsv678
Dschu

5
var InputBox = React.createClass({
  getInitialState(){
    return {
      text: ''
    };
  },
  render: function () {
    return (
      <input
        ref="input"
        className="mainInput"
        placeholder='Text'
        value={this.state.text}
        onChange={(e)=>{this.setState({text:e.target.value});}}
        onFocus={()=>{this.refs.input.select()}}
      />
    )
  }
});

Sie müssen ref auf den Eingang setzen und wenn Sie fokussiert sind, müssen Sie select () verwenden.


5

Danke ich schätze das. Ich habe es so gemacht:

var input = self.refs.value.getDOMNode();
            input.focus();
            input.setSelectionRange(0, input.value.length);

1

In meinem Fall wollte ich den Text von Anfang an auswählen, nachdem die Eingabe im Modal angezeigt wurde:

componentDidMount: function() {
    this.refs.copy.select();
},

<input ref='copy'

0
var React = require('react');

var Select = React.createClass({
    handleFocus: function(event) {
        event.target.select()
    },
    render: function() {
        <input type="text" onFocus={this.handleFocus} value={'all of this stuff'} />
    }
});

module.exports = Select;

Wählen Sie automatisch alle Inhalte in einer Eingabe für eine Reaktionsklasse aus. Das onFocus-Attribut eines Eingabe-Tags ruft eine Funktion auf. Bei der OnFocus-Funktion wird ein Parameter namens event automatisch generiert. Wie oben gezeigt, setzt event.target.select () den gesamten Inhalt eines Eingabe-Tags.


Während dieses Code-Snippet die Frage möglicherweise beantwortet, bietet es keinen Kontext, um zu erklären, wie oder warum. Fügen Sie ein oder zwei Sätze hinzu, um Ihre Antwort zu erklären.
Brandonscript

0

Eine andere Möglichkeit Funktionskomponente mit useRefHook:

const inputEl = useRef(null);

function handleFocus() {
  inputEl.current.select();
}

<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.