Wie wähle ich den gesamten Text in der Eingabe mit Reactjs aus, wenn es fokussiert ist?

Lesezeit: 2 Minuten

Benutzer-Avatar
Alexander Schtang

Zum Beispiel: Codestift

var InputBox = React.createClass({
  render: function() {
    return (
      <input className="mainInput" value="Some something"></input>
    )
  }
});

Benutzer-Avatar
dschu

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} />
      );
    },
})

Ein weiterer Weg 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}
/>

  • Ich verstehe nicht, warum Sie den Ref brauchen? Sie haben das Ereignisobjekt beim Auslösen des onFocus-Ereignisses.

    – Christian Moen

    15. November 2021 um 14:11 Uhr

Benutzer-Avatar
Alexander Schtang

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

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

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 die Eingabe setzen und wenn Sie fokussiert sind, müssen Sie select () verwenden.

Lassen Sie uns das einfachste hinzufügen, basierend auf der Antwort von @ dschu:

...
<input type="text" value="Some something" onFocus={e => e.target.select()} />
...

  • Dies sollte die akzeptierte Antwort sein. Es ist das einfachste und schreibmaschinenfreundlich.

    – LCIII

    3. August um 20:20 Uhr

Benutzer-Avatar
Lukas Lukas

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

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

<input ref="copy"

  • Dies sollte die akzeptierte Antwort sein. Es ist das einfachste und schreibmaschinenfreundlich.

    – LCIII

    3. August um 20:20 Uhr

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;

Alle Inhalte in einer Eingabe für eine Reaktionsklasse automatisch auswählen. Das onFocus-Attribut eines Eingabe-Tags ruft eine Funktion auf. Die OnFocus-Funktion hat einen automatisch generierten Parameter namens event. Wie oben gezeigt wird event.target.select() den gesamten Inhalt eines Eingabe-Tags festlegen.

1245200cookie-checkWie wähle ich den gesamten Text in der Eingabe mit Reactjs aus, wenn es fokussiert ist?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy