iOS TextField - l'autocomplétion ajoute un caractère vide

Question

J'ai un problème avec un UITextField. Lorsque l'option de saisie automatique des adresses électroniques est activée, je peux sélectionner une adresse électronique dans la liste, mais iOS ajoute automatiquement un espace vide à la fin du champ de texte.

Est-ce un bug d'iOS ou y a-t-il quelque chose que je puisse faire pour éviter cela ? P.S. Je sais que je peux gérer les changements de texte et supprimer les espaces vides à la fin de la chaîne, mais je cherche la méthode native.

Answer 1

Le comportement par défaut de la suggestion intelligente est d'ajouter un espace vide après le texte fourni, de sorte que si vous écrivez une phrase, vous n'aurez pas à appuyer sur l'espace après avoir sélectionné la suggestion.

Je recommanderais de supprimer les espaces blancs pour que, même si l'utilisateur essaie de le saisir, il soit écarté.

Vous pouvez le faire en modifiant le texte par programme après qu'il ait été modifié :

Ajoutez une cible à votre champ de texte dans le champ viewDidLoad du contrôleur

textField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)

@objc func textFieldDidChange(_ textField: UITextField) {

    let text = textField.text ?? ""

    let trimmedText = text.trimmingCharacters(in: .whitespaces)

    textField.text = trimmedText
}

Answer 2

Tout texte sélectionné dans la barre QuickType ajoute un espace, je suppose que c'est pour éviter de devoir ajouter manuellement un espace à chaque fois. J'imagine qu'attendre d'iOS qu'il n'ajoute pas intelligemment cet espace va à l'encontre de cette commodité. Au moins, l'espace est automatiquement supprimé si vous ajoutez un point.

Je résous ce problème en créant une sous-classe de UITextField pour tous les champs de texte de l'application :

import UIKit

class ApplicationTextField: UITextField {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        NotificationCenter.default.addObserver(self, selector: #selector(didEndEditing(notification:)), name: UITextField.textDidEndEditingNotification, object: nil)
    }

    @objc private func didEndEditing(notification:Notification) {
        self.text = self.text?.trimmingCharacters(in: .whitespaces)
    }
}

Pour permettre à d'autres objets d'implémenter le UITextFieldDelegate, j'utilise l'attribut NotificationCenter et observez les didEndEditing(notification:) notification.

Answer 3

Je n'ai pas trouvé le moyen de résoudre ce problème. Honnêtement, je n'ai pas passé beaucoup de temps. Je travaille toujours sur un projet, et j'ai donc laissé ce problème en suspens parce que je travaille sur d'autres fonctionnalités. Nous pouvons considérer cela comme un bug Apple. Entre-temps, le champ de texte de l'e-mail offre un moyen d'entrer des espaces vides, je ne sais pas pourquoi puisque les adresses e-mail ne contiennent pas de caractères vides. Pour l'instant, j'ai une idée pour surmonter ce problème en fixant l'adresse e-mail après l'édition, et non pendant l'édition.

Par exemple, je peux accepter cet e-mail avec un caractère blanc comme entrée de la saisie automatique, mais lorsque j'enregistre cet e-mail ou que j'envoie un e-mail à cette adresse, je pourrais supprimer l'espace blanc.

Answer 4

Je l'ai contourné sur react-native avec redux-form en vérifiant props.textContentType == "emailAddress" comme ci-dessous :

 <TextInput

            {...props}
            onChangeText={props.input.onChange}
            value={props.textContentType == "emailAddress"? props.input.value.trim(): props.input.value}
        />

Answer 5

Si vous avez fait une recherche sur Google et que vous utilisez React Native, vous devrez alors .trim() votre valeur lorsque vous l'enregistrez et la vérifiez.

Par exemple, si vous rendez votre champ TextInput d'email :

     <TextInput
            ref={(input) => {
              this.emailTextInput = input;
            }}
            clearButtonMode={'while-editing'}
            autoComplete={"email"}
            textContentType={"emailAddress"}
            keyboardType={"email-address"}
            placeholder={"Email"}
            maxLength={100}
            onChangeText={email => this.validateAndSet("email", email)}
          />

et ensuite, dans votre fonction onChange/Validation, assurez-vous que vous coupez la valeur :

  validateAndSet(key, value) {

    // do validations, mark fields as invalid, etc.

    this.setState({ [key]: value });

    if (key === 'email') {
      this.setState({email: value.trim()})
    }
  }