¿Alguna idea sobre cómo hacer que la edición en el lugar sea degradable?

Question

Actualmente estoy escribiendo un script de edición en el lugar para MooTools y estoy un poco perplejo sobre cómo puedo hacer que se degrade con gracia sin JavaScript sin dejar de tener alguna funcionalidad. Me gustaría utilizar la mejora progresiva de alguna manera. No busco código, sino más bien un concepto sobre cómo abordar la situación. Si tiene alguna idea o sabe de los scripts de edición en el lugar que se degradan con gracia, comparta.

Answer 1

Parece que te estás acercando a esto desde la dirección incorrecta. En lugar de crear la edición en el lugar y hacer que se degrade muy bien (el ángulo de degradación elegante), realmente debería crear una versión que no sea Javascript para editar y luego agregar la edición en el lugar usando Javascript después de cargar la página, referido a como Mejora progresiva .

Hay dos opciones para esto. Cree la pantalla como un formulario con un botón de envío que funcione sin Javascript, luego, usando Javascript, reemplace las entradas con algún tipo de etiqueta que realice la edición en el lugar. Debería poder usar una combinación de etiquetas y atributos de identificación para elegir las propiedades correctas para que funcione su implementación de edición en el lugar. La otra opción si no desea que se muestre un formulario de forma predeterminada es mostrar los valores con un botón / enlace para convertirlo en un formulario utilizando el procesamiento del lado del servidor, y luego agregar la edición en el lugar.

Answer 2

No se puede realizar la edición en el sitio sin JavaScript, por lo que una degradación elegante consiste en asegurarse de que el usuario pueda editar el elemento en cuestión cuando JavaScript no esté disponible.

Como tal, solo tendría un enlace para editar todo el elemento en cuestión y luego crear los controles de edición en sitio en JavaScript en la carga de la página, ocultando el enlace de edición si prefieres que los usuarios usen edit- in situ cuando esté disponible.

Answer 3

Si se trata de contenido textual, puede mostrar el contenido editable como un botón de envío de tipo de entrada, con el título como contenido. Al hacer clic, enviaría el formulario completo, conservando los otros valores, y mostraría un diálogo de edición. Posteriormente, los valores del formulario podrían restaurarse.

Answer 4

Quizás ponga una entrada en un div debajo de cada elemento que tenga una edición en el lugar. Cuando se carga la página, use JavaScript para ocultar esos divs. De esa forma, solo serán utilizables si javascript nunca se activa.

Answer 5

Asumo que lo que estás intentando hacer es algo como el siguiente escenario:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

Donde el < a > es un botón que reemplaza < span > con un < input > ;, para que pueda editarse. Hay un par de maneras de hacer que esto se degrade con gracia (es decir, trabajar sin JavaScript).

En teoría:

Usando CSS, hazlo con psuedo-selectors. : active es algo así como un evento onclick, por lo que si anida un < input > en < li > ;, este CSS oculta < span > y muestra < input > cuando se hace clic en el li.

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

Esto puede funcionar en su navegador favorito, pero sin duda encontrará que se rompe en IE.

En la práctica:

Use un enlace. Tener que & Lt; a & Gt; ser un enlace real que vaya a una página donde esta sustitución de entrada / intervalo se haya realizado en el lado del servidor. Pega un controlador de eventos en & Lt; a & Gt; que usa MooTools para cancelar el evento de clic para las personas que tienen JS, así:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

Intente usar un texto de entrada con estilo y, después de cargar la página, hágalo de solo lectura, usando el atributo de solo lectura. y cuando haga clic en él, elimine el atributo de solo lectura y onblur haciéndolo de solo lectura nuevamente. al hacer clic en " Guardar " botón o en evento onblur, haga una solicitud de Ajax para guardar los datos en el servidor.