jQuery enfoque

Question

Digamos que tengo el siguiente marcado:

<div id="content"> 
    <div id="firstP"><p>First paragraph</p></div> 
    <div id="secondP"><p>Second paragraph</p></div> 
    <div id="thirdP"><p>Third paragraph</p></div> 
    <div id="fourthP"><p>Fourth paragraph</p></div> 
</div> 

Quiero añadir un nuevo div con Javascript y centrarse en este nuevo elemento. El foco no hace nada.

function addParagraph() { 
    var html = "<div id=\"newP\"><p>New paragraph</p></div>"; 
    $("#content").append(html); 
    $("#newP").focus();  
} 

¿Alguna idea?

Answer 1

No hay problema con su código, es solo que un párrafo o etiqueta div no puede recibir el foco. El enfoque solo se puede dar a cosas con las que puede interactuar, como enlaces, elementos de entrada, áreas de texto, etc.

Para desplazarse por la ventana hacia este elemento recién agregado, puede usar un complemento como ScrollTo.

En una nota, el código podría simplificarse un poco:

var html = "<div id=\"newP\"><p>New paragraph</p></div>"; 
$("#content").append(html); 
$("#newP p").focus(); 

var html = "<div id=\"newP\"><p>New paragraph</p></div>"; 
$(html) 
    .appendTo('#content') 
    .focus() // or scrollTo(), now... 
; 

Answer 2

Creo que lo que está buscando está usando el plugin 'ScrollTo' en jQuery. Puede check it out here.

Puede especificar qué desplazarse ...

$('div.pane').scrollTo(...);//all divs w/class pane 

O simplemente desplazar la ventana:

$.scrollTo(...);//the plugin will take care of this 

Hay muchas formas diferentes de especificar la posición de destino. Estos son:

• Varios prima
• Una cadena ('44' , '100px', '+ = 30px', etc)
elemento
• Un DOM (lógicamente, hijo de la desplazable elemento)
• Un selector, que estará en relación con el elemento desplazable
• Un hash {top: X, izquierda: y}, X e y pueden ser cualquier tipo de número/cadena como la de arriba.

Bono: En la excavación de esta información, también encontré LocalScroll y SerialScroll (anima el desplazamiento de un elemento al siguiente).

Answer 3

Debe usar un anclaje de página HTML no enfocado. Ejemplo:

http://localhost/mypage.html#fourthP 

Answer 4

Solo los elementos de formulario y tal pueden lograr el enfoque.Si desea que el navegador se desplace hacia abajo a ese párrafo en particular, no hay forma "predeterminada" de hacerlo con jQuery, pero hay un complemento para él en jQuery.ScrollTo y un blog que explica cómo hacerlo manualmente en Animated scroll with jQuery

Answer 5

En lugar de

$("#newP").focus(); 

que se debe utilizar:

window.location.href=window.location.href + "#newP";  

Answer 6

Creo que la principal respuesta es incorrecta. Las etiquetas DIV y P pueden recibir foco siempre que especifique una propiedad tabindex para ellas. es decir,

<div class="someclass" tabindex="100"> 

Una vez que se especifica el índice de tabulación que puede o pestaña de estos elementos o cambiar de enfoque con .focus().

Usar un complemento scrollTo parece un poco exagerado aquí.

Answer 7

Este código evitará las dependencias de otros complementos y le permitirá tenerlo en cualquier elemento.

$('html, body').animate({ scrollTop: $("#newP").offset().top }, 500); 

Answer 8

Puede asignar tabidex y entonces se puede establecer el foco a ese elemento

$('#table').attr("tabindex",1).focus(); 

Esto funcionará para Div Tabla etc, que no se puede obtener un enfoque por sí mismo.