¿Cómo puedo incluir el contenido de un elemento con la propiedad contenteditable en una solicitud HTMX?
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=”'true'” hx-post=”"/update_db"” hx-trigger=”"blur"” hx-target=”"#parent-div"” hx-swap=”"outerHTML">” hola,=”” soy=”” un=”” campo=”” editable=”” </div>=”” </div>=””>
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: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 atributocontenteditable
, ya que los eventoschange
solo se activan cuando el elemento pierde el foco después de ser editado.