Incapable de se concentrer une entrée à l'aide de JavaScript dans IE11

Je ne suis pas en mesure d'obtenir IE11 concentrer un élément d'entrée après il est inséré dans le DOM. L'élément ne recevrez pas de saisie de texte après avoir été porté, mais son texte de l'espace réservé n'est plus visible. L'élément est créé par Réagir, et je suis accédant à Réagir de refs objet dans componentDidMount:

componentDidMount() {
    this.refs.input.getDOMNode().focus();
}

J'ai essayé d'ajouter un court délai à l'aide de setTimeout:

componentDidMount() {
    setTimeout(() => this.refs.input.getDOMNode().focus(), 10);
}

J'ai aussi essayé d'ajouter un tabIndex de "1" à l'entrée.

Dans le cas où il est utile, ici, c'est le rendu de la JSX:

<div style={style}>
    <div style={labelStyle}>Enter a name to begin.</div>

    <form onSubmit={this.submit} style={formStyle}>
        <input 
             tabIndex="1" 
             ref="input" 
             value={this.state.username} 
             onChange={this.updateUsername}
             placeholder="New User Name" 
             style={inputStyle}
        />
        <button {...this.getBrowserStateEvents()} style={this.buildStyles(buttonStyle)}>Create</button>
    </form>
</div>

Est-il une astuce pour obtenir le focus à travailler dans IE11 que je le sache?

input ressemble à un mauvais choix pour la ref nom
Avez-vous jouer avec l'autre du cycle de vie des méthodes? Je me demande si les appels à componentDidUpdate sont gâcher l'accent mis dans componentDidMount.
Le problème a été causé par le -ms-user-select: none propriété css.
ah, je vois - je pense vous pouvez accepter votre propre réponse.
Je le peux. J'ai juste à attendre 24 heures après leur publication.

OriginalL'auteur SimpleJ | 2015-08-11

8

Le problème a été en se concentrant dans IE11 est interrompue lorsque la propriété css -ms-user-select: none est appliquée à l'entrée. Donc, en changeant:
```
* {
  -ms-user-select: none;
}
```
en
```
*:not(input) {
  -ms-user-select: none;
}
```
J'ai été en mesure de résoudre le problème. Voici une codepen pour reproduire le problème:
http://codepen.io/anon/pen/yNrJZz

J'apprécie ce problème a été résolu, mais a soulevé un autre. L'utilisateur ne peut pas en mesure de sélectionner l'entrée de texte. Comment résoudre ces problèmes?

OriginalL'auteur SimpleJ
2

Je ne pense pas que votre problème vient de la fonction (), je pense que ça vient de la sélection.

Pour le prouver je viens d'ouvrir mon IE11 et essayé de mettre au point AFIN de saisie de recherche en haut à droite de la page à l'aide de la commande suivante:
```
document.getElementById('search')[0].focus()
```
Donc, il suffit d'ouvrir votre IE de la console (F12) et le type, il devrait se concentrer la recherche d'entrée. Si oui, alors le problème vient du sélecteur de ce qui n'est pas une entrée que vous pouvez penser.

Il fonctionne sur mon IE 11.0.9600.17905

Le problème n'existe que dans IE. Le focus fonctionne très bien sur Chrome et Firefox. Aussi l'entrée est de recevoir une sorte de partielle focus (je peux cliquer en dehors de ça, et le texte de l'espace réservé réapparaît, mais je ne peux pas le type de texte sans avoir à cliquer à nouveau). Je suis également pas à l'aide d'un sélecteur; je suis l'aide de réagir de refs objet.
Alors peut-être que le problème vient de react's refs object, je ne sais pas ce que c'est, mais si c'est une troisième partie de la bibliothèque ou quelque chose le problème pourrait venir d'eux directement. Ce que je peux voir, c'est que focus() fonctionne correctement sur IE11 lorsqu'il est utilisé sur une entrée.

OriginalL'auteur Vadorequest
1

Comme indiqué dans https://stackoverflow.com/a/31971940, l'exécution de element.focus() n'a pas d'effet dans IE11 lorsque la propriété css -ms-user-select: none est réglé.
Une solution de contournement peut être
```
element.style['-ms-user-select'] = 'text';
element.focus()
element.style['-ms-user-select'] = '';
```
Ne fonctionne pas dans IE: https://codepen.io/macjohnny-zh/details/WPXWvy

(Code: https://codepen.io/macjohnny-zh/pen/WPXWvy)

Fonctionne sous IE, trop: https://codepen.io/macjohnny-zh/details/LqOvbZ

(Code: https://codepen.io/macjohnny-zh/pen/LqOvbZ)

Remarque: c'est également le cas par exemple pour
```
:-ms-input-placeholder {
  -ms-user-select: none;
}
```
Voir https://github.com/angular/material2/issues/15093

OriginalL'auteur Esteban Marin

Vous devez vous connecter pour publier un commentaire.