déplace le curseur à la fin d'un champ de saisie de texte ET rend la fin visible

Je deviens fou. J'ai une boîte d'autosuggest où les utilisateurs choisissent une suggestion. Lors de la sélection de suggestion suivante, la valeur de la zone de saisie de texte dépasse sa taille. Je peux déplacer le carat à la fin du crossbrowser de champ d'entrée, pas de problème. Mais sur Chrome et Safari, je ne peux pas voir le carat à la fin. La fin du texte n'est pas visible.déplace le curseur à la fin d'un champ de saisie de texte ET rend la fin visible

Existe-t-il un moyen de déplacer le carat à la fin d'un champ de saisie de texte ET d'avoir la fin du champ visible de sorte que l'utilisateur ne soit pas confus au sujet de l'entrée carat?

ce que je suis arrivé à ce jour:

<html> 
<head><title>Field update test</title></head> 

<body> 
<form action="#" method="POST" name="testform"> 

<p>After a field is updated the carat should be at the end of the text field AND the end of the text should be visible</p> 

<input type="text" name="testbox" value="" size="40"> 

<p><a href="javascript:void(0);" onclick="add_more_text();">add more text</a></p> 

</form> 

<script type="text/javascript"> 
<!-- 
var count = 0; 

function add_more_text() { 
    var textfield = document.testform.elements['testbox']; 

    textfield.focus(); 

    if (count == 0) textfield.value = ''; // clear old 

    count++; 
    textfield.value = textfield.value + (textfield.value.length ? ', ' : '') + count + ": This is some sample text"; 

    // move to the carat to the end of the field 
    if (textfield.setSelectionRange) { 
     textfield.setSelectionRange(textfield.value.length, textfield.value.length); 
    } else if (textfield.createTextRange) { 
     var range = textfield.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', textfield.value.length); 
     range.moveStart('character', textfield.value.length); 
     range.select(); 
    } 

    // force carat visibility for some browsers 
    if (document.createEvent) { 
     // Trigger a space keypress. 
     var e = document.createEvent('KeyboardEvent'); 
     if (typeof(e.initKeyEvent) != 'undefined') { 
     e.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32); 
     } else { 
     e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 0, 32); 
     } 
     textfield.dispatchEvent(e); 

     // Trigger a backspace keypress. 
     e = document.createEvent('KeyboardEvent'); 
     if (typeof(e.initKeyEvent) != 'undefined') { 
     e.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0); 
     } else { 
     e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 8, 0); 
     } 
     textfield.dispatchEvent(e); 
    } 
} 
// --> 
</script> 

</body> 
</html>

Merci

Source

2010-04-22 whereisalext

je suis venu avec une solution. Webkit (Safari et Chrome) a besoin d'un coup de pied dans le pantalon pour effectuer l'événement du clavier correctement. Ajouter un flou(), puis focus() avant le retour arrière:

textfield.blur(); // Webkit wake-up hack 
    textfield.focus(); 
    textfield.dispatchEvent(e);

Merci. Fonctionne dans Safari, Chrome, FF, IE sur Mac et Windows maintenant.

Source

2010-04-22 15:57:03 whereisalext

déplace le curseur à la fin d'un champ de saisie de texte ET rend la fin visible

Répondre

Questions connexes