Définir la position du clavier dans la zone de texte html
est-ce que quelqu'un sait comment déplacer le clavier caret dans une boîte de texte à une position particulière?
par exemple, si une zone de texte (par exemple un élément d'Entrée, pas une zone de texte) contient 50 caractères et que je veux positionner le signe d'insertion avant le caractère 20, comment le ferais-je?
c'est en différenciation de cette question: jQuery position du curseur dans la zone de texte , qui nécessite jQuery.
8 réponses
une fonction générique qui vous permettra d'insérer le signe d'insertion à n'importe quelle position d'une boîte de texte ou d'une textarea que vous souhaitez:
function setCaretPosition(elemId, caretPos) {
var elem = document.getElementById(elemId);
if(elem != null) {
if(elem.createTextRange) {
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else {
if(elem.selectionStart) {
elem.focus();
elem.setSelectionRange(caretPos, caretPos);
}
else
elem.focus();
}
}
}
Le premier paramètre est l'ID de l'élément que vous souhaitez insérer le clavier lambda. Si l'élément n'est pas trouvé, rien qui va se passer (bien évidemment). Le second paramètre est l'indice caret positon. Zero mettra le clavier caret au début. Si vous passez un nombre plus grand que le nombre de caractères dans la valeur d'éléments, il mettra le caret de clavier à la fin.
testé sur IE6 et plus, Firefox 2, Opera 8, Netscape 9, SeaMonkey, et Safari. Malheureusement sur Safari il ne fonctionne pas en combinaison avec l'événement onfocus).
un exemple d'utilisation de ce qui précède fonction pour forcer le clavier caret pour sauter à la fin de tous les textareas sur la page quand ils reçoivent focus:
function addLoadEvent(func) {
if(typeof window.onload != 'function') {
window.onload = func;
}
else {
if(func) {
var oldLoad = window.onload;
window.onload = function() {
if(oldLoad)
oldLoad();
func();
}
}
}
}
// The setCaretPosition function belongs right here!
function setTextAreasOnFocus() {
/***
* This function will force the keyboard caret to be positioned
* at the end of all textareas when they receive focus.
*/
var textAreas = document.getElementsByTagName('textarea');
for(var i = 0; i < textAreas.length; i++) {
textAreas[i].onfocus = function() {
setCaretPosition(this.id, this.value.length);
}
}
textAreas = null;
}
addLoadEvent(setTextAreasOnFocus);
le lien dans la réponse est cassé, celui-ci devrait fonctionner (tous les crédits vont à blog.vishalon.net ):
http://snipplr.com/view/5144/getset-cursor-in-html-textarea /
en cas de nouvelle perte du code, Voici les deux fonctions principales:
function doGetCaretPosition(ctrl)
{
var CaretPos = 0;
if (ctrl.selectionStart || ctrl.selectionStart == 0)
{// Standard.
CaretPos = ctrl.selectionStart;
}
else if (document.selection)
{// Legacy IE
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
return (CaretPos);
}
function setCaretPosition(ctrl,pos)
{
if (ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange)
{
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
étant donné que j'avais vraiment besoin de cette solution, et que la solution de base typique ( focus the input - then set the value equal to itself ) ne fonctionne pas à travers le navigateur , j'ai passé un certain temps à tout Modifier et à tout éditer pour qu'elle fonctionne. En se basant sur le code de @ kd7 voici ce que j'ai trouvé.
Profitez-en! Works in IE6+, Firefox, Chrome, Safari ,Opera
Cross-browser signe de positionnement technique (exemple: déplacer le curseur à la FIN)
// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)
setCaretPosition('IDHERE', 10); // example
la viande et les pommes de terre est fondamentalement @ kd7 's setCaretPosition, avec le plus grand tweak étant if (el.selectionStart || el.selectionStart === 0) , dans firefox le selectionStart commence à 0 , qui dans booléen bien sûr se transforme en faux, donc il se cassait là.
dans chrome le plus grand problème était que simplement lui donner .focus() n'était pas suffisant (il a continué à sélectionner tout le texte!) Par conséquent, nous avons fixé la valeur d'elle-même, à elle-même el.value = el.value; avant d'appeler notre fonction, et maintenant il a une saisie & position avec l'entrée pour utiliser selectionStart .
function setCaretPosition(elemId, caretPos) {
var el = document.getElementById(elemId);
el.value = el.value;
// ^ this is used to not only get "focus", but
// to make sure we don't have it everything -selected-
// (it causes an issue in chrome, and having it doesn't hurt any other browser)
if (el !== null) {
if (el.createTextRange) {
var range = el.createTextRange();
range.move('character', caretPos);
range.select();
return true;
}
else {
// (el.selectionStart === 0 added for Firefox bug)
if (el.selectionStart || el.selectionStart === 0) {
el.focus();
el.setSelectionRange(caretPos, caretPos);
return true;
}
else { // fail city, fortunately this never happens (as far as I've tested) :)
el.focus();
return false;
}
}
}
}
j'ai ajusté un peu la réponse de kd7 parce que elem.selectionStart va évaluer à false quand selectionStart est incidemment 0.
function setCaretPosition(elem, caretPos) {
var range;
if (elem.createTextRange) {
range = elem.createTextRange();
range.move('character', caretPos);
range.select();
} else {
elem.focus();
if (elem.selectionStart !== undefined) {
elem.setSelectionRange(caretPos, caretPos);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
setCaret(document.getElementById('input1'), 13, 13)
}
function setCaret(el, st, end)
{
if (el.setSelectionRange)
{
el.focus();
el.setSelectionRange(st, end);
}
else
{
if (el.createTextRange)
{
range = el.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', st);
range.select();
}
}
}
//]]>
</script>
</head>
<body>
<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>
<p> </p>
</body>
</html>
function SetCaretEnd(tID) {
tID += "";
if (!tID.startsWith("#")) { tID = "#" + tID; }
$(tID).focus();
var t = $(tID).val();
if (t.length == 0) { return; }
$(tID).val("");
$(tID).val(t);
$(tID).scrollTop($(tID)[0].scrollHeight); }
si vous avez besoin de focaliser une zone de texte et que votre seul problème est que le texte entier est surligné alors que vous voulez que le signe d'insertion soit à la fin, alors dans ce cas précis, vous pouvez utiliser cette astuce de paramétrage de la valeur de la zone de texte à elle-même après focus:
$("#myinputfield").focus().val($("#myinputfield").val());
Je fixerais les conditions comme ci-dessous:
function setCaretPosition(elemId, caretPos)
{
var elem = document.getElementById(elemId);
if (elem)
{
if (typeof elem.createTextRange != 'undefined')
{
var range = elem.createTextRange();
range.move('character', caretPos);
range.select();
}
else
{
if (typeof elem.selectionStart != 'undefined')
elem.selectionStart = caretPos;
elem.focus();
}
}
}