Elements editables en HTML5



L’HTML5 ens aporta una gran quantitat de novetats, que mica en mica ens hem d’anar familiartizant. En aquest sentit hi ha la utilitat de que els elements puguin ser editables. En aquest document veurem com fer que un element sigui editable i com podríem guardar aquest text.

Contingut editable en HTML5

Primer de tot el què farem serà definir un paràgraf que pugui ser editable i un botó per a que l’usuari pugui indicar que vol desar els canvis que ha efectuat.

  1. <p id=”text” contenteditable=”true”>Aquest contingut serà editable.</p>
  2. <a id=”desa” href=”#”>DESA!</a>

Un cop tenim això podem definit el JS que ens permetrà obtenir el contingut i enviar-l’ho al servidor (per exemple).

  1. $(‘#desa’).click(function(){
  2. var aux = $(‘#text’).html();
  3. alert( aux );
  4. });​

A continuació podem veure com el contingut d’un div és editable:

AQUEST CONTINGUT ES POT EDITAR.

Aquesta funcionalitat pot ser molt ben rebuda per la comunitat de desenvolupadors, ja que pot solucionar la creació de múltiples pantalles (una que mostra la informació entrada i una altra per si es vol modificar) ja que tot es pot fer amb la mateixa pantalla.
Podeu provar aquesta nova funcionalitat de manera dinàmica gràcies a Rendera.

Tags: ,

Articles relacionats

Esborrar nodes del DOM en PHP

Deck.js – Presentacions en HTML5

Mozilla presenta WebAPI

OOCSS (2a part), profunditzant en els widgets

La setmana a Twitter

  • http://folsiruaw.bloggplatsen.se/gilla/?url=http://valerydoas.hatenablog.com Broken Toe

    Broken Toe…

    OOCSS, Object-Oriented CSS | open-pitu, el blog lliure en català…