5542 sujets

Sémantique web et HTML

Bonjour, c'est de nouveau moi...
J'aimerais conserver le contenu d'une div généré par une textarea.
J'ai déjà une piste qui utilise Jquery et JS mais elle ne marche pas...
voila le code html:

<textarea id="texte"></textarea>
<input type="button" value="Poster..." onclick="apercu();" />
<div id="apercu"></div>

Et le JS:

<script type="text/javascript">
    function apercu()
    {
    document.getElementById("apercu").innerHTML = document.getElementById("texte").value;
    }
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</script>
<script>
      $(function (){
      // sauvegarde du contenu lors du clic hors de la liste
      var tobuy = document.getElementById('apercu');
      $("#apercu").blur(function() {
        localStorage.setItem('tobuyData', this.innerHTML);
      });
      // récupération du contenu au chargement de page
        if (localStorage.getItem('tobuyData')) {
        tobuy.innerHTML = localStorage.getItem('tobuyData');
        }
      });
</script>

Merci d'avance...
Modérateur
Bonjour,

Le code marche presque. Le seul problème, c'est qu'une balise <div> n'a pas de "blur" event par défaut. Du coup, l'action ne se déclenche jamais. Si on remplace "blur" par "hover", et qu'on passe la souris au dessus du <div> de l'aperçu, on peut vérifier que ça se met à marcher.

Après, bon, faudrait sans doute imaginer autre chose pour stocker le contenu du <div> dans le localStorage. Peut-être que ce serait mieux de le faire simplement en même temps qu'on remplit le <div>.

Par exemple :
function apercu()
{
	var tobuy = document.getElementById('apercu');
    tobuy.innerHTML = document.getElementById("texte").value;
	localStorage.setItem('tobuyData', tobuy.innerHTML);
}
$(function (){
    var tobuy = document.getElementById('apercu');
	if (localStorage.getItem('tobuyData')) {
		tobuy.innerHTML = localStorage.getItem('tobuyData');
	}
});


Amicalement,
Modifié par parsimonhi (08 Oct 2020 - 15:19)