350 votos

jQuery fijar posición del Cursor en el área de texto

¿Cómo se puede establecer la posición del cursor en un campo de texto con jQuery? Tengo un campo de texto con el contenido, y quiero que los usuarios cursor se posicionará en un cierto desplazamiento cuando se centran en el campo. El código debe ser algo como esto:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

¿Qué sería de la aplicación de la setCursorPosition función? Si había un campo de texto con el contenido abcdefg, llamada podría resultar en que el cursor se posiciona como sigue: abcd*|*efg.

Java tiene una función similar, setCaretPosition. ¿Un método similar existe para javascript?

Actualización: he modificado los CMS de código para trabajar con jQuery de la siguiente manera:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

259voto

Mark Puntos 49079

Aquí es una solución de jQuery:

$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Con esto, se puede hacer

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

Ejemplo JsFiddle

188voto

CMS Puntos 315406

Tengo dos funciones:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

A continuación, puede utilizar setCaretToPos como esta:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

34voto

HRJ Puntos 4750

Las soluciones aquí están excepto el código de extensión jQuery.

La función de extensión debe iterar sobre cada elemento seleccionado y volver this a apoyar encadenamiento. Aquí está la versión una correcta:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
    if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
    } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  });
  return this;
};

17voto

AVProgrammer Puntos 626

He encontrado una solución que funciona para mí:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

Ahora puede mover el enfoque a fin de cualquier elemento llamando al:

$(element).focusEnd();

4voto

Ben Noland Puntos 10060

Estoy utilizando esto: http://plugins.jquery.com/project/jCaret

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X