Entrée de texte HTML de droite à gauche
Pour mon site Web, je dois fournir un support en arabe. Une partie consiste à fournir des zones de texte de saisie où, lorsque l'utilisateur entre, les nouveaux caractères doivent être ajoutés à gauche et le texte doit être aligné à droite.
définir la propriété css à
text-align:right
ne fonctionnait pas car je ne pouvais pas amener le curseur à venir à gauche et à y ajouter des lettres. J'ai donc supprimé cette propriété et ajouté
direction:RTL
Ici, le curseur est venu à gauche et le texte était aligné à droite. mais les caractères nouvellement ajoutés ne sont pas ajoutés à gauche. Au lieu de cela, ils étaient ajoutés au bon bout seulement.
Comment puis-je réparer ça? s'il vous plaît aidez ..
Par exemple, voir le champ de recherche de page google arab. J'ai besoin du comportement exact, mais pas avec ces icônes de clavier fantaisie, etc., http://www.google.com/webhp?hl=ar
Voici ce que je peux penser:
- Utilisez
direction:RTLpour l'alignement à DROITE - Ecrivez un gestionnaire javascript attaché à l'événement: "onkeyup", qui effectue le décalage du caractère saisi vers le LEFT (traitement de texte).
Vous pouvez utiliser le dir = "rtl" sur l'entrée. C'est supporté.
<input dir="rtl" id="foo"/>
function rtl(element)
{
if(element.setSelectionRange){
element.setSelectionRange(0,0);
}
}
<input type="text" name="textbox" style="direction:RTL;" onkeyup="rtl(this);"/>
Ce code fera l'affaire.
Utilisez uniquement direction:RTL et lorsque les paramètres du système sont configurés sur un clavier approprié (par exemple, arabe), les nouveaux caractères ajoutés sont correctement ajoutés à gauche.
Utiliser sur l'entrée en css.
input {
unicode-bidi:bidi-override;
direction: RTL;
}
Une fonctionnalité spécifique à Angular Material, en plus de la direction: rtl, est:
.mat-form-field {
text-align: start!important;
}
Cela fonctionnera à la fois pour RLT et LTR