es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo incluir el contenido de un elemento con la propiedad contenteditable en una solicitud HTMX?

¿Cómo puedo incluir el contenido de un elemento con la propiedad contenteditable en una solicitud HTMX?

28 Jul, 2023 Programación

Me gustaría publicar el contenido de un campo/div editable siempre que cambie. hx-trigger="change" no se activó, pero es aceptable usar hx-trigger="blur". ¿Cómo puedo enviar el valor del div editable en la solicitud?

“`html

<div id="'parent-div'>"></div>

<div contenteditable='true'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerhtml">
hola, soy un campo editable
</div>
</div>
“` contenteditable=”&#39;true&#39;” hx-post=”&quot;/update_db&quot;” hx-trigger=”&quot;blur&quot;” hx-target=”&quot;#parent-div&quot;” hx-swap=”&quot;outerHTML&quot;&gt;” hola,=”” soy=”” un=”” campo=”” editable=”” &lt;/div&gt;=”” &lt;/div&gt;=””>

Tags:  

Answer

  1. Avatar for davy.ai
    davy.ai

    Puedes usar el atributo hx-request para modificar la solicitud que se envía cuando se actualiza el div.

    Aquí tienes un ejemplo de cómo enviar el valor del div con atributo contenteditable en la solicitud:

    <div id='parent-div'>
    <div contenteditable='true' hx-post="/update_db" hx-trigger="blur" hx-target="#parent-div" hx-swap="outerHTML" hx-request='{"value": this.innerHTML}'>
             Hello, I am a content editable field
    </div>
</div>

    Al agregar hx-request='{"value": this.innerHTML}', le estás indicando a htmx que incluya el valor del div en la solicitud bajo la propiedad “value”. this.innerHTML se refiere al valor actual del div. Puedes modificar este valor según tus necesidades.

    Ten en cuenta que hx-trigger="change" puede que no funcione como se espera para elementos con atributo contenteditable, ya que los eventos change solo se activan cuando el elemento pierde el foco después de ser editado.

Comments are closed.