Transformez votre navigateur en bloc-note
Avec une ligne de code !

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Le , par Bovino, Responsable Développement Web

C'est peut-être aussi votre cas, mais il m'arrive souvent d'avoir envie (ou besoin) de conserver certaines informations ou certains textes dans un coin mais sans vouloir pour autant les conserver.

La méthode habituelle, c'est de créer un fichier .txt dans lequel on note ou copie / colle ces informations. Puis, une fois que l'on n'en a plus besoin, on supprime de fichier.

Mais tout cela est bien inutile !
Votre navigateur peut faire office de bloc-note et comme (si vous êtes comme moi ! ) le navigateur est constamment ouvert, cette solution est idéale.

Pour cela, il suffit d'ouvrir un onglet et de rentrer dans la barre d'adresse :
data:text/html, <html contenteditable>

Et voilà ! Le tour est joué, il ne vous reste qu'à écrire !

Source : One line browser notepad.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de happyboon happyboon
http://www.developpez.com
Membre habitué
le 31/01/2013 11:18
Citation Envoyé par Bovino  Voir le message


La méthode habituelle, c'est de créer un fichier .txt dans lequel on note ou copie / colle ces informations. Puis, une fois que l'on n'en a plus besoin, on supprime de fichier.

Et voilà ! Le tour est joué, il ne vous reste qu'à écrire !

excuse moi Bonivo une fois que j'ai mon code html saisi dans le navigateur, comment je fais pour le tester et le voir son rendement en tant que internaute?
Avatar de Gadjetor Gadjetor
http://www.developpez.com
Invité de passage
le 31/01/2013 11:20
Et le Ctrl+S fonctionne aussi ! Permettant de sauvegarder la note...
Avatar de macmorning macmorning
http://www.developpez.com
Invité régulier
le 31/01/2013 14:03
Hello,

J'essaie d'ajouter un bout de code pour sauvegarder le contenu dans le localStorage toutes les 2 secondes, voilà où j'en suis :
Code :
data:text/html, <html><script>function i(){document.getElementById('textdiv').innerHTML=localStorage.mynotes;setInterval(function(){localStorage.mynotes=document.getElementById('textdiv').innerHTML;},2000);}</script><body onload="i();"><div contenteditable style="width:100%;height:100%;font-family:tahoma;border:1px black;" id='textdiv'/></body></html>
Malheureusement il n'a pas l'air de sauvegarder correctement mon localStorage, peut-être est-ce dû à la méthode d'accès via "data:text/html" ?
Avatar de Bovino Bovino
http://www.developpez.com
Responsable Développement Web
le 31/01/2013 14:07
Attention !
Le but n'est absolument pas de transformer le navigateur en éditeur HTML !
Pour ça, tous les navigateurs dignes de ce nom possèdent des consoles efficaces.

Le but est de pouvoir utiliser un onglet du navigateur comme bloc-note temporaire !
Avatar de macmorning macmorning
http://www.developpez.com
Invité régulier
le 31/01/2013 14:12
Oui c'est pour le fun !
Et effectivement lorsque je mets le code dans un fichier html, le localStorage est bien conservé.
Avatar de Bovino Bovino
http://www.developpez.com
Responsable Développement Web
le 31/01/2013 15:43
Ce n'est pas possible avec cette méthode car localStorage est limité par des contraintes de sécurité (notamment la Same Origin Policy) qui ne sont pas présentes.

En revanche, dans un fichier, c'est possible :
Code html :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html> 
<html> 
<head> 
	<meta charset="utf-8" /> 
	<title>Bloc Note</title> 
	<script> 
		window.onload = function(){ 
			var content = localStorage.getItem('notepad') ? localStorage.getItem('notepad') : ''; 
			document.body.innerHTML = content; 
			document.body.onkeyup = function(){ 
				localStorage.setItem('notepad', document.body.innerHTML); 
			} 
		} 
	</script> 
</head> 
<body contenteditable></body> 
</html>
Bon, il manque quelques tests de feature detection, mais dans les navigateurs compatibles, ça fonctionne.
Offres d'emploi IT
Chargé d'Etudes et Développement GTA (H/F)
CDI
Gustave Roussy - Ile de France - Villejuif (94800)
Parue le 02/10/2014
Gestion de projets h/f
Stage
Société Générale - Ile de France - Paris La Défense
Parue le 23/10/2014
H/F-Ingenieur Systemes
CDI
Sogeti - Régions - Méditerrannée - Provence Alpes Côte d'Azur - MED (06000)
Parue le 29/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula