HTML contenteditable

Già da molto tempo esiste l’ attributo contenteditable per gli elementi HTML, e la compatibilità è abbastanza buona con tutti i browser.

Quando si edita un elemento, al refresh si perdono le modifiche: per memorizzarle è necessario gestire alcuni eventi quali, ad esempio, la pressione del tasto Invio o Canc.

Vedere l’ esempio di Remy Sharp:
http://jsbin.com/owavu3

document.addEventListener('keydown', function (event) {
  var esc = event.which == 27,
      nl = event.which == 13,
      el = event.target,
      input = el.nodeName != 'INPUT' && el.nodeName != 'TEXTAREA',
      data = {};

  if (input) {
    if (esc) {
      // restore state
      document.execCommand('undo');
      el.blur();
    } else if (nl) {
      // save
      data[el.getAttribute('data-name')] = el.innerHTML;

      // we could send an ajax request to update the field
      /*
      $.ajax({
        url: window.location.toString(),
        data: data,
        type: 'post'
      });
      */
      log(JSON.stringify(data));

      el.blur();
      event.preventDefault();
    }
  }
}, true);

function log(s) {
  document.getElementById('debug').innerHTML = 'value changed to: ' + s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
[contenteditable]:hover:after {
  content: ' click to edit';
  font-style: italic;
  font-size: 12px;
  font-family: sans-serif;
  color: #ccc;
  .text-stroke(0);
}

[contenteditable]:hover, [contenteditable]:focus {
  background: #FFFFD3;
}

[contenteditable]:focus {
  padding: 5px;
}

[contenteditable]:focus:after {
  content: '';
}
</style>
</head>
<body>
  <p contenteditable data-name="title" id="hello">Hello World</p>
  <div id="debug"></div>
</body>
</html>

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...