Comment déplacer le curseur à la dernière position D'un texte en Javascript?
j'ai un textarea et un bouton sur un formulaire. Le textarea peut déjà avoir un texte. Je voudrais déplacer le curseur à la dernière position dans la zone de texte lorsque le bouton est cliqué.
Est-ce possible?
7 réponses
Par "la dernière position", vous voulez dire la fin du texte?
Modification ‘.la valeur’ d'un champ de formulaire déplacera le curseur à la fin dans chaque navigateur sauf IE. Avec IE, vous devez vous salir les mains et manipuler délibérément la sélection, en utilisant des interfaces non standard:
if (browserIsIE) {
var range= element.createTextRange();
range.collapse(false);
range.select();
} else {
element.focus();
var v= element.value();
element.value= '';
element.value= v;
}
ou voulez-vous dire remettre le curseur à l'endroit où il était auparavant, la dernière fois que la textarea était concentrée?
dans chaque navigateur sauf IE, cela se fera déjà en appelant "element".focus()’; le navigateur se souvient de la dernière position du curseur/sélection par entrée et la remet sur focus.
ce serait assez délicat à reproduire dans IE. Vous devez sonder tout le temps pour vérifier où était le curseur/sélection, et se souvenir de cette position si elle était dans un élément d'entrée, puis récupérer la position pour un élément donné quand le bouton a été pressé et le restaurer. Cela implique une certaine vraiment assez fastidieux manipulation du document ‘sélection.createRange ()".
Je ne suis pas au courant de quoi que ce soit dans jQuery qui pourrait vous aider à faire cela, mais il pourrait y avoir un plugin quelque part peut-être?
la réponse de xgMz était la meilleure pour moi. Vous n'avez pas besoin de s'inquiéter à propos du navigateur:
var html = $("#MyTextArea").val();
$("#MyTextArea").focus().val("").val(html);
Et voici une rapide extension jQuery que j'ai écrit pour ce faire, pour moi la prochaine fois:
; (function($) {
$.fn.focusToEnd = function() {
return this.each(function() {
var v = $(this).val();
$(this).focus().val("").val(v);
});
};
})(jQuery);
Utiliser comme ceci:
$("#MyTextArea").focusToEnd();
Vous pouvez aussi faire ceci:
$(document).ready(function()
{
var el = $("#myInput").get(0);
var elemLen = el.value.length;
el.selectionStart = elemLen;
el.selectionEnd = elemLen;
el.focus();
});
Ce code fonctionne pour les deux input et textarea. Testé avec les derniers navigateurs: Firefox 23, IE 11 et Chrome 28.
jsFiddle disponible ici: http://jsfiddle.net/cG9gN/1/
Vous pouvez utiliser ce https://github.com/DrPheltRight/jquery-caret
$('input').caretToEnd();
C'est ce que j'utilise pour les textareas à l'intérieur de mon onclick ou d'autres événements et semble fonctionner très bien pour FireFox et IE 7 & 8. Il positionne le curseur à la fin du texte, au lieu de l'avant.
this.value = "some text I want to pre-populate";
this.blur();
this.focus();
focus de la souris et déplacer le curseur à la fin de l'entrée. Son travail dans chaque navigateur, sa logique simple ici.
input.focus();
tmpStr = input.val();
input.val('');
input.val(tmpStr);
j'ai modifié un peu l'extension @mkaj pour prendre en charge la valeur par défaut
; (function($) {
$.fn.focusToEnd = function(defaultValue) {
return this.each(function() {
var prevValue = $(this).val();
if (typeof prevValue == undefined || prevValue == "") {
prevValue = defaultValue;
}
$(this).focus().val("").val(prevValue);
});
};
})(jQuery);
// See it in action here
$(element).focusToEnd("Cursor will be at my tail...");