mostrar el cursor / símbolo de intercalación al comienzo del cuadro de entrada

1

PROBLEMA : Tengo un cuadro de entrada de texto html con algo de texto, cuando el usuario hace clic en el cuadro de entrada, me gustaría que aparezca el cursor / símbolo de intercalación al principio del cuadro de entrada.

Podría mover un signo de intercalación usando la función setSelectionRange (), pero no me gusta el efecto de que el símbolo de intercalación que se muestra al final del cuadro de entrada de texto se mueva al principio. Me gustaría que estuviera al comienzo de la entrada que se muestra.

ejemplo: http://jsfiddle.net/edh8mkht/1/

HTML

<body>
    <input type="text" id="myP" onmousedown="mouseDown()" value="Mozilla" />
</body>

JS

function mouseDown() {
    document.getElementById("myP").style.color = "green";
    document.getElementById("myP").setSelectionRange(0,0);
}

PREGUNTA 1 :

Utilizo el evento mousedown para mover el cursor, pero no mueve el cursor en absoluto, sucede lo mismo si uso el evento onfocus. ¿Es porque el símbolo de intercalación aparece después de estos dos eventos y hacer setSelectionRange no tiene ningún efecto?

PREGUNTA 2:

¿Cuál es una buena manera de resolver mi problema usando javascript? Nota: no puedo usar un marcador de posición.

0

Violín que muestra la selección inicial del cuadro de texto

Requisitos para que esto funcione:

  1. Debe poder envolver su entrada en un label(o realmente cualquier elemento que pueda aceptar un nodo hijo)
  2. Tiene que admitir la pointer-eventspropiedad CSS
  3. Tienes que poder mover el evento de disparo de inputlalabel

HTML

<label for="myP" onclick="click();">
    <input type="text" id="myP" value="Mozilla" />
</label>

CSS

input#myP {
  pointer-events: none;
}

JavaScript

function click() {
    var input = document.getElementById("myP");
    input.style.pointerEvents = 'auto';
    input.style.color = "green";
    input.setSelectionRange(0,0);
    console.log('click');
}

Cosas importantes a considerar en esta implementación:

  • Es esencial que proteja su selector de CSS con el tipo de elemento. En este caso, es input#myPopuesto a #myP. De lo contrario, CSS seleccionará tanto el labelcomo inputen algunos navegadores si forse especifica el atributo.
  • Debe aplicar algún elemento de estilo a su etiqueta , de lo contrario, esto simplemente no funcionará.
  • Su punto de intercalación siempre estará antes del valor inicial cuando se haga clic. Al menos en Chrome. Eso es parte del problema con tu setSelectionRangellamada. Tendría que investigar un poco para averiguar por qué es así.