1

Buenas noches comunidad. Me encuentro haciendo una práctica y estoy atorado en esta parte, necesito que el div color azul tome datos (texto para postear). Lo estoy haciendo de esta manera porque la página original va generando en un div la información.

A lo que he tratado de hacer es hacerle un focus a la caja para que se posicione con un tabindex pero la verdad no funciona alguna sugerencia?

function focusDiv(){
 

      document.getElementById('.postear').focus();
     


}
.publicacion-post{

    padding: 15px;

    border:1px solid #000;
}
.postear{
    border:1px solid rgb(6, 4, 9);
    height: 45px;
    width: 100%;
}

.span-escribir{
border: 1px solid rgb(17, 14, 221);
display: inline-block;
margin-top: 10px;
height: 20px;
width: 200px;
}
<div class="publicacion-post">
                               
                            <div id='post' class="postear" tabindex="-1">
                            <div type="text" class="span-escribir"></div>
                            </div>
                            
                                    
                        </div>

Espero que se haya entendido, además poder enviar ese div como post y enviar el post ya sea a un campo de tabla o un archivo de texto

1
  • Puedes provar poniendole un span y por javascript controlar todo lo que se escrive por ejemplo. Si no puedes ponerle el atributo contenteditable="true" para editar el contenido. el 22 nov. 2021 a las 8:42

2 respuestas 2

1

Para hacer esto, lo mejor es con un input type="text", el cual funciona de manera eficiente para recoger texto. Debería cumplir la funcionalidad que propones, ya que está dentro del div.

Así es como puedes hacer focus al texto.

     document.getElementsByTagName('input')[0].focus();
.publicacion-post{

        padding: 15px;

        border:1px solid #000;
    }
    .postear{
        border:1px solid rgb(6, 4, 9);
        height: 45px;
        width: 100%;
    }

    .span-escribir{
    border: 1px solid rgb(17, 14, 221);
    display: inline-block;
    margin-top: 10px;
    height: 20px;
    width: 200px;
    }
<div class="publicacion-post">
                                   
        <div id='post' class="postear" tabindex="-1">
        <input id="texto" type="text" class="span-escribir"/>
        </div>                  
                                    
   </div>

4
  • Cualquier duda o aclaración, no dudes en comentármela. el 22 nov. 2021 a las 8:41
  • Hola buenos días. muchas gracias la verdad traté hacerlo con input pero no me da el efecto que quiero pero ya con tu información y recomendación tuya y del otro compañero voy a aplicarlo haber que sucede. el 22 nov. 2021 a las 15:49
  • Holaa, genial! Me alegro. Cualquier cosa dime! el 22 nov. 2021 a las 15:53
  • Hola de nuevo, ya quedo lo de insertar texto, ahora creo que la caja al tener mucho texto se desborda en el eje Y logré controlar el eje X con overFlowWrap='break-word', sin embargo al tener mucho texto la caja se me desborda, sabes que propiedad pudiera colocar para solucionar esto? el 22 nov. 2021 a las 16:38
1

Tienes varios errores y voy a tratar de describirlos en orden de importancia:

  • Para que un elemento pueda funcionar como campo de formulario debes asignar el atributo contenteditable="true" que también soluciona el poder pasarle foco sin necesidad de aplicar tabindex
  • Quieres activar el div con recuadro azul, pero el ID está asignado a su ancestro
  • document.getElementById() espera recibir ID de elemento, sin embargo, tu envías .postear, que es una clase y, por supuesto, no funciona
  • Finalmente, nunca ejecutas la función focusDiv()

function focusDiv(){
    document.getElementById('post').focus();
}

// Ejecutar cuando se cargue el DOM
document.addEventListener('DOMContentLoaded', e => {
    focusDiv();
});
.publicacion-post{
    padding: 15px;
    border:1px solid #000;
}
/* No especifiques altura (height) para que se adapte de acuerdo al contenido */
.postear{
    border:1px solid rgb(6, 4, 9);
    width: 100%;
}

.span-escribir{
    border: 1px solid rgb(17, 14, 221);
    display: inline-block;
    margin-top: 10px;
    /* En todo caso, usa altura mínima para cuando el elemento esté vacío */
    min-height: 20px;
    width: 200px;
}
<div class="publicacion-post">
    <div class="postear">
        <!-- Asignar ID al elemento que puede editarse -->
        <div id="post" class="span-escribir" contenteditable="true"></div>
    </div>
</div>

1
  • Muchas gracias tomaré en cuenta lo que me dices, la verdad no tenía ni idea de la información que me diste. el 22 nov. 2021 a las 15:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.