Establecer la posición del cursor en un campo de texto de entrada

Después de mucha búsqueda me encontré con los siguientes temas:Establecer la posición del cursor en un campo de texto de entrada

define cursor position in form input field

jQuery Set Cursor Position in Text Area

Por desgracia, en ninguno de los mensajes de un código de formulario de inserción completa o una reales ejemplo es dado. Ahora no sé cómo incluir el código del nemisj (en el primer enlace) o código de Marcos (en el segundo enlace) en mi formulario:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script> 
    $(document).ready(function(){ 
$("#site").focus(function(){ 
    if(this.value == this.defaultValue) { 
     $(this).val("http://"); 
    } 
}); 
    }); 
    </script> 

</head> 
<body> 
<form action="#" method="post"> 
<input id="name" type="text" name="name" value="Name" /><br /> 
<input id="site" type="text" name="mail" value="Website" /><br /> 
<input type="submit" value="Send"> 
</form> 
</body> 
</html>

Me pregunto si alguien amablemente me podría ayudar con esto como yo Estoy muy atascado!

¡Muchas gracias de antemano!

Aquí está el código editado, pero aún no funciona:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script> 
function setCursor(node,pos){ 

    var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node; 

    if(!node){ 
     return false; 
    }else if(node.createTextRange){ 
     var textRange = node.createTextRange(); 
     textRange.collapse(true); 
     textRange.moveEnd(pos); 
     textRange.moveStart(pos); 
     textRange.select(); 
     return true; 
    }else if(node.setSelectionRange){ 
     node.setSelectionRange(pos,pos); 
     return true; 
    } 

    return false; 
} 
    $(document).ready(function(){ 
$("#site").focus(function(){ 
    if(this.value == this.defaultValue) { 
    $(this).val("http://"); 

    var node = $(this).get(0); 
    setCursor(node,node.value.length); 
} 
}); 
    }); 
    </script> 

</head> 
<body> 
<form action="#" method="post"> 
<input id="name" type="text" name="name" value="Name" /><br /> 
<input id="site" type="text" name="mail" value="Website" /><br /> 
<input type="submit" value="Send"> 
</form> 
</body> 
</html>

Fuente

2011-04-22 Mori

createTextRange es un explorador de Internet único método. No lo use –

dentro de la etiqueta <script></script> es donde va el JavaScript (aunque preferimos ponerlo en un archivo separado, de modo que ningún JavaScript vive la página HTML en sí).

Dentro de eso, tiene una llamada al $(document).ready(), que pasa un function() { ... }. Dentro de esa función está todo el código que se ejecutará cuando se haya cargado su documento.

Dentro que función tiene una llamada a $('#site').focus() que a su vez proporciona una función - esta vez uno que se llama siempre que las ganancias #site elemento centran. Y presumiblemente es allí donde quieres cambiar la posición del cursor.

Así, teniendo la función setCursor de Set cursor at a length of 14 onfocus of a textbox puedes poner eso en cualquier parte del <script></script> y luego dentro de esa función más interna de la suya puede escribir:

if(this.value == this.defaultValue) { 
    $(this).val("http://"); 

    var node = $(this).get(0); 
    setCursor(node,node.value.length); 
}

Fuente

2011-04-22 13:33:41 VoteyDisciple

Gracias por la respuesta detallada, pero me gustaría que haya proporcionado el código de inserción ya que aún no puedo hacerlo funcionar. ¡Seguí tus instrucciones sin aval! :( – Mori

Es posible que desee editar su pregunta para compartir el código que terminó. – VoteyDisciple

He actualizado el código. – Mori

Creo que he encontrado el error en el método de setCursor. Los métodos moveStart y moveEnd esperan dos argumentos, el primero es la unidad que debería usar. Además, la posición final parece ser relativa a la posición de inicio. Así que creo que en lugar de

textRange.moveEnd(pos); 
    textRange.moveStart(pos);

desea

textRange.moveStart('character', pos); 
    textRange.moveEnd('character', 0);

Ver: http://msdn.microsoft.com/en-us/library/ie/ms536623(v=vs.85).aspx

Fuente

2012-10-18 16:01:23 Herms

Establecer la posición del cursor en un campo de texto de entrada

Respuesta

Cuestiones relacionadas