Cuadro de entrada de enfoque en carga

95

¿Cómo se puede enfocar el cursor en un cuadro de entrada específico al cargar la página?

¿Es posible retener también el valor del texto inicial y colocar el cursor al final de la entrada?

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />

javascript html dom xhtml Codex73
fuente

170

Su pregunta tiene dos partes.

1) ¿Cómo enfocar una entrada en la carga de la página?

Simplemente puede agregar el autofocusatributo a la entrada.

<input id="myinputbox" type="text" autofocus>

Sin embargo, es posible que esto no sea compatible con todos los navegadores, por lo que podemos usar javascript.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

2) ¿Cómo colocar el cursor al final del texto de entrada?

Aquí hay una solución que no es de jQuery con un código prestado de otra respuesta SO .

function placeCursorAtEnd() {
  if (this.setSelectionRange) {
    // Double the length because Opera is inconsistent about 
    // whether a carriage return is one character or two.
    var len = this.value.length * 2;
    this.setSelectionRange(len, len);
  } else {
    // This might work for browsers without setSelectionRange support.
    this.value = this.value;
  }

  if (this.nodeName === "TEXTAREA") {
    // This will scroll a textarea to the bottom if needed
    this.scrollTop = 999999;
  }
};

window.onload = function() {
  var input = document.getElementById("myinputbox");

  if (obj.addEventListener) {
    obj.addEventListener("focus", placeCursorAtEnd, false);
  } else if (obj.attachEvent) {
    obj.attachEvent('onfocus', placeCursorAtEnd);
  }

  input.focus();
}

Aquí hay un ejemplo de cómo lograría esto con jQuery.

<input type="text" autofocus>

<script>
$(function() {
  $("[autofocus]").on("focus", function() {
    if (this.setSelectionRange) {
      var len = this.value.length * 2;
      this.setSelectionRange(len, len);
    } else {
      this.value = this.value;
    }
    this.scrollTop = 999999;
  }).focus();
});
</script>

jessegavin
fuente

3

El primer bloque de código sugerido también coloca el cursor al final del valor existente, funciona bien. Agradezco tu ayuda.

Codex73

46

Solo un aviso: ahora puede hacer esto con HTML5 sin JavaScript para los navegadores que lo admiten:

<input type="text" autofocus>

Probablemente desee comenzar con esto y desarrollarlo con JavaScript para proporcionar un respaldo para los navegadores más antiguos.

David Calhoun
fuente

Es bueno saber eso, ¿esto ya mueve el cursor a la última posición en el campo de entrada?

Camilo Díaz Repka

1

No creo que @ Codex73 esté tratando de lograr lo que hace el atributo de marcador de posición en HTML5. Parece que quiere que el cursor se coloque automáticamente al final de cualquier valor que se encuentre actualmente en la entrada.

jessegavin

2

Tienes razón, esta no es una solución completa. Pero esto resuelve un par de cosas (autoenfoque de carga y texto de marcador de posición).

David Calhoun

Tenga en cuenta que a partir del 1/2019, Safari en iOS no admite esto: caniuse.com/#feat=autofocus

sporker

11

$(document).ready(function() {
    $('#id').focus();
});

Nasruddin
fuente

1

Esto requiere jQuery.

Tom Pohl

1

Sí, necesitas incluir las bibliotecas de jQuery :)

Nasruddin

stackoverflow clásico :)

Florian Fida

3

function focusOnMyInputBox(){                                 
    document.getElementById("myinputbox").focus();
}

<body onLoad="focusOnMyInputBox();">

<input type="text"  size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">

crnlx
fuente

2

Una forma portátil de hacer esto es usar una función personalizada (para manejar las diferencias del navegador) como esta .

Luego configure un controlador para el onloadal final de su <body>etiqueta, como escribió jessegavin:

window.onload = function() {
  document.getElementById("myinputbox").focus();
}

Camilo Díaz Repka
fuente

1

Funcionando bien...

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

Mohammed Javed
fuente

1

solución de una línea muy simple:

<body onLoad="document.getElementById('myinputbox').focus();">

kavi
fuente

0

Esto es lo que funciona bien para mí:

<form name="f" action="/search">
    <input name="q" onfocus="fff=1" />
</form>

fff será una variable global cuyo nombre es absolutamente irrelevante y cuyo objetivo será detener el evento de carga genérico para forzar el foco en esa entrada.

<body onload="if(!this.fff)document.f.q.focus();">
    <!-- ... the rest of the page ... -->
</body>

De: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

Roger
fuente

0

Si no puede agregar a la etiqueta BODY por alguna razón, puede agregar esto DESPUÉS del formulario:

<SCRIPT type="text/javascript">
    document.yourFormName.yourFieldName.focus();
</SCRIPT>

Zardiw
fuente

0

Tratar:

Javascript puro:

[elem][n].style.visibility='visible';
[elem][n].focus();

Jquery:

[elem].filter(':visible').focus();

KingRider
fuente

0

Agregue esto a la parte superior de su js

var input = $('#myinputbox');

input.focus();

O a html

<script>
    var input = $('#myinputbox');

    input.focus();
</script>

Marty
fuente

Cuadro de entrada de enfoque en carga

Respuestas: