posicion - removeattr javascript

jQuery establece la posición del cursor en el área de texto

Question

¿Cómo se establece la posición del cursor en un campo de texto utilizando jQuery? Tengo un campo de texto con contenido y quiero que el cursor de los usuarios se coloque en un cierto desplazamiento cuando se centran en el campo. El código debería verse así:

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

¿Cómo sería la implementación de esa función setCursorPosition? Si tuviera un campo de texto con el contenido abcdefg, esta llamada resultaría en la posición del cursor de la siguiente manera: abcd ** | ** efg.

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

Actualización: modifiqué el código de CMS 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);

Answer 1

¿Establecer el enfoque antes de haber insertado el texto en el área de texto?

$("#comments").focus();
$("#comments").val(comments);

Answer 2

Aquí hay una solución jQuery:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if(''selectionStart'' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            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, puedes hacer

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

• JsFiddle
• JsBin

Answer 3

Basado en esta question , la respuesta no funcionará perfectamente para ie y opera cuando hay una nueva línea en el área de texto. La answer explica cómo ajustar el selectionStart, selectionEnd antes de llamar a setSelectionRange.

He probado el ajuste de ajuste de la otra pregunta con la solución propuesta por @AVProgrammer y funciona.

function adjustOffset(el, offset) {
    /* From https://.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("/r/n") > -1) {
        var matches = val.replace(//r/n/g, "/n").slice(0, offset).match(//n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://.com/a/7180862/611741 
       modified to fit https://.com/a/8928945/611741 */
    if(this.lengh == 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();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

Answer 4

En IE para mover el cursor en alguna posición este código es suficiente:

var range = elt.createTextRange();
range.move(''character'', pos);
range.select();

Answer 5

Encontré 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 puedes mover el enfoque al final de cualquier elemento llamando a:

$(element).focusEnd();

Answer 6

Esto me funcionó en Safari 5 en Mac OSX, jQuery 1.4:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

Answer 7

Esto me funciona en cromo.

$(''#input'').focus(function() {
    setTimeout( function() {
        document.getElementById(''input'').selectionStart = 4;
        document.getElementById(''input'').selectionEnd = 4;
    }, 1);
});

Aparentemente, necesita un retraso de un microsegundo o más, porque generalmente un usuario se enfoca en el campo de texto haciendo clic en alguna posición en el campo de texto (o presionando la pestaña) que desea anular, así que tiene que esperar hasta que la posición sea establecido por el usuario haga clic y luego cambiarlo.

Answer 8

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

Answer 9

Las soluciones aquí son correctas, excepto el código de extensión jQuery.

La función de extensión debe iterar sobre cada elemento seleccionado y devolverlo para admitir el encadenamiento. Aquí está la versión 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;
};

Answer 10

Me doy cuenta de que este es un post muy antiguo, pero pensé que debería ofrecer una solución más sencilla para actualizarlo solo con jQuery.

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"/n",secondSlice].join('''');

    return new_text;
}

Uso para usar ctrl-enter para agregar una nueva línea (como en Facebook):

$(''textarea'').on(''keypress'',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

Estoy abierto a la crítica. Gracias.

ACTUALIZACIÓN: esta solución no permite el funcionamiento normal de las funciones de copiar y pegar (es decir, ctrl-c, ctrl-v), por lo que tendré que editar esto en el futuro para asegurarme de que la parte vuelva a funcionar. Si tiene una idea de cómo hacerlo, comente aquí y estaré encantado de probarlo. Gracias.

Answer 11

Pequeña modificación al código que encontré en bitbucket

El código ahora puede seleccionar / resaltar con puntos de inicio / finalización si se le dan 2 posiciones. Probado y funciona bien en FF / Chrome / IE9 / Opera.

$(''#field'').caret(1, 9);

El código se lista a continuación, solo algunas líneas cambiaron:

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return ''0'';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint(''EndToStart'', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd(''character'', pos_end);
      range.moveStart(''character'', pos_start);
      range.select();
    }
  }
})(jQuery)

Answer 12

Puede cambiar directamente el prototipo si setSelectionRange no existe.

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd(''character'', end);
                this.moveStart(''character'', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

jsFiddle link

Answer 13

Solo recuerde devolver el mensaje falso justo después de la llamada a la función si está usando las teclas de flecha, ya que, de lo contrario, Chrome frota el frack.

{
    document.getElementById(''moveto3'').setSelectionRange(3,3);
    return false;
}

Answer 14

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);
}

Entonces puedes usar setCaretToPos como este:

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

Ejemplo en vivo con un área de textarea y una input , mostrando el uso de jQuery:

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);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

A partir de 2016, probado y funcionando en Chrome, Firefox, IE11, incluso IE8 (vea esto último; los fragmentos de pila no son compatibles con IE8).

Answer 15

Tuve que conseguir que esto funcionara para elementos contenteditable y jQuery y pensé que alguien podría quererlo listo para usar:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log(''position: ''+s.anchorOffset+'' of ''+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log(''position: ''+s.anchorOffset+'' of ''+s.anchorNode.textContent.length);
    return this;
};

Uso $(selector).getCaret() devuelve el desplazamiento de número y $(selector).setCaret(num) establece el desplazamiento y establece el foco en el elemento.

También un pequeño consejo, si ejecuta $(selector).setCaret(num) desde la consola, devolverá el archivo console.log pero no visualizará el enfoque ya que está establecido en la ventana de la consola.

Mejores; D