Manejo de Eventos en Elementos HTML con SolidJS
Contenido del curso
Danny González
Kenneth Angulo L
Kenneth Angulo L
<span ondblclick={(e)=>{ e.target.setAttribute("contenteditable",true); e.target.focus(); }} onblur={(e)=>{ e.target.removeAttribute("contenteditable"); setTodos((todos)=> todos.map((t,i)=>{ return i === index() ?{...t,text:e.target.innerText}:t; }) ) }} >
para poder apuntarle realmente al elemento:
e.currentTarget
¿Es posible editar texto sin usar inputs?
Sí, es totalmente posible y de hecho proporciona una experiencia de usuario muy fluida, conocida como "edición en el lugar" (in-place editing). La magia detrás de esto es un atributo nativo de HTML llamado contentEditable.
Cuando detectas una interacción específica, como un doble clic (onDoubleClick), puedes inyectar este atributo en un elemento de texto común, como un <span> o un <p>. Inmediatamente, el navegador transforma ese texto estático en un área donde el cursor puede parpadear y el teclado puede modificar el contenido, tal como si fuera un <input>.
Para que la experiencia sea perfecta, debes combinar esto con el método .focus() para que el usuario pueda empezar a escribir de inmediato. Una vez que el usuario termina (detectado mediante onBlur), capturas el nuevo texto, actualizas tu estado global mediante tu setter, y le retiras el atributo contentEditable al elemento. Es una técnica brillante para interfaces minimalistas tipo Notion o Trello.
