dimanche 20 décembre 2015

Bloc-Notes en textarea






J'ai trouvé ces scripts utilisant une "textarea"  en cherchant dans Google et avec 2, j'en ai fait 1.
Ce n'est pas nouveau mais ça me fascine toujours autant. Il y a un côté magique dans ce genre d'utilitaire.
Je ne vais pas m'étendre sur l'aspect technique des "textarea" mais juste vous proposer mon utilitaire et son code.


La page peut être hébergée sur votre serveur si vous en avez un ou même tout simplement dans Blogger avec un thème minimaliste ou encore dans le dossier public de votre Dropbox.


À préciser que vos notes sont sauvegardées dans un "cooky" très utile et inoffensif.
Mais si votre navigateur ne prends pas les cookies pour une raison ou une autre, bien-sûr, ça ne marchera pas. De même si vous les effacez, vos notes seront perdues. Bien entendu, vous seul pouvez voire vos notes! Pas d'inquiétude!


Une fois votre "textarea" ouvert dans votre navigateur, il ne vous reste plus qu'à le mettre dans vos favoris ou mieux, d'en faire une application. Beaucoup de navigateurs permettent de faire ça facilement mais je trouve que ce sont ceux basés sur Chromium qui s'en sortent le mieux. Quand votre nouvelle webapp est prête, il suffit de créer un lanceur.


Le cadre ci-dessus est opérationnel, vous pouvez donc l'essayer. Tapez un texte quelconque dans le cadre. Fermez la page. Rouvrez la. Votre texte devrait réapparaître.


Voici le code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>PETITES NOTES</title>
  </head>
  <body>
    <script type="text/javascript">
function cookieSave(name, text) {
  document.cookie = name + "=" + escape(text);
  }

function cookieLoad(name) {
  var search = name + "=";
  if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search);
    if (offset != -1) {
      offset += search.length;
      end = document.cookie.indexOf(";", offset);
      if (end == -1) {
        end = document.cookie.length;
        }
      return unescape(document.cookie.substring(offset, end));
      }
    }
       
  }
</script>

<div style="text-align: center; ">
    <form> <textarea id="editArea" onkeyup="cookieSave('editArea',this.value);" style="text-align: left; width:640px; height:480px; border:1px solid #999;"></textarea>
    </form>
</div>
    <script type="text/javascript">
var txt =        cookieLoad('editArea');
        if( typeof txt != 'undefined')
                document.getElementById('editArea').value = txt;
</script>
  </body>
</html>

Pour Blogger, seule la partie en bleu est à copier-coller dans votre post ou votre widget HTML/Javascript.

Certaines valeurs peuvent être modifiées à votre guise notamment entre <div style="text-align: center; "> et </div>

Je pense aussi que ça pourrait être enjolivé avec du CSS.


Mes autres "Mini-Notes" (vous pouvez les utiliser)


Aucun commentaire:

Enregistrer un commentaire