javascript - not - JQuery focus

jquery focus out

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 agregar un nuevo div con Javascript y enfocarme 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

Creo que lo que estás buscando es usar el complemento ''ScrollTo'' en jQuery. Puedes consultarlo aquí .

Puede especificar qué desplazarse ...

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

O simplemente desliza la ventana:

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

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

• Un número crudo
• Una cadena (''44 '','' 100px '','' + = 30px '', etc.)
• Un elemento DOM (lógicamente, secundario del elemento desplazable)
• Un selector, que será relativo al elemento desplazable
• Un hash {top: x, left: y}, xey puede ser cualquier tipo de número / cadena como el anterior.

Bonificación: al desenterrar esta información, también encontré LocalScroll y SerialScroll (anima el desplazamiento de un elemento al siguiente).

Answer 2

En lugar de

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

debe ser usado:

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

Answer 3

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

http://localhost/mypage.html#fourthP

Answer 4

Solo los elementos de la forma y tal pueden alcanzar el enfoque. Si desea que el navegador se desplace hacia abajo a ese párrafo en particular, no hay una 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 el desplazamiento animado con jQuery

Answer 5

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 las 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 lateral, su 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 6

Creo que la respuesta principal 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 tabindex, puede tabular estos elementos o cambiar el foco con .focus () .

Usar un plugin 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 luego puede establecer el foco en ese elemento

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

Esto funcionará para Div Table, etc. que no puede enfocarse solo.