11548 sujets

JavaScript, DOM et API Web HTML5

Selection du texte dans une div.

Bonjour à tous,

Je cherche a faire quelque chose mais je ne trouve la réponse nulle part. Je voulais savoir si c'était possible de séléctionner le texte d'une div dés qu'on clique dedant ?

Merci d'avance pour votre aide.

Bonne journée.
djmustru a écrit :
Je cherche a faire quelque chose mais je ne trouve la réponse nulle part. Je voulais savoir si c'était possible de séléctionner le texte d'une div dés qu'on clique dedant ?

Ça n'est pas possible avec juste HTML et CSS. Si c'est possible, ce sera donc avec Javascript. Je déplace donc ce sujet dans le salon qui va bien. Smiley smile
Modérateur
Salut,

Tu peux peaufiner le script mais le principe est là :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />

		<title>Exemple</title>

		<style type="text/css"><!--

@media screen, projection
{
	body
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 80%;
	}
	.select a
	{
		color: black;
		text-decoration: none;
		font-size: 1em;
	}
	.select textarea
	{
		font-family: Verdana, Arial, Helvetica, sans-serif;
		padding: 0;
		border: 0;
		margin: 0;
		overflow: visible;
		font-size: 1em;
		width: 100%;
	}
}

		--></style>
		<script type="text/javascript"><!--

var oO =
{
	connect: function(oElem, sEvType, fn, bCapture)
	{
		return document.addEventListener ?
			oElem.addEventListener(sEvType, fn, bCapture):
			oElem.attachEvent ?
				oElem.attachEvent('on' + sEvType, fn):
				false;
	},

	cancelClick: function(e)
	{
		if(e && e.stopPropagation && e.preventDefault)
		{
			e.stopPropagation();
			e.preventDefault();
		}
		else if(e && window.event)
		{
			window.event.cancelBubble = true;
			window.event.returnValue = false;
		}

		return false;
	},

	getSource: function(e)
	{
		return e ?
			e.target || e.srcElement:
			false;
	},

	affectSelect: function(oEl)
	{
		oEl.innerHTML = '<a href="#select">' + oEl.innerHTML + '</a>';

		return oO.connect(oEl.firstChild, 'click', oO.select, false);
	},

	reaffectSelect: function(e)
	{
		var oSrc, oParent;

		oSrc = oO.getSource(e);
		oParent = oSrc.parentNode;

		oParent.innerHTML = '<a href="#select">' + oSrc.value + '</a>';

		return oO.connect(oParent.firstChild, 'click', oO.select, false);
	},

	select: function(e)
	{
		var oSrc, oParent;

		oO.cancelClick(e);
		oSrc = oO.getSource(e);
		oParent = oSrc.parentNode;

		oParent.innerHTML = '<textarea rows="" cols="">' + oSrc.innerHTML + '</textarea>';

		oParent.firstChild.select();

		return oO.connect(oParent.firstChild, 'blur', oO.reaffectSelect, false);
	},

	init: function()
	{
		var aPs, iP;

		aPs = document.getElementsByTagName('p');

		iP = aPs.length;

		do
		{
			if(aPs[--iP].className === 'select')
				oO.affectSelect(aPs[iP]);
		}
		while(iP > 0);

		return true;
	}
};

oO.connect(window, 'load', oO.init, false);

		//--></script>
	</head>
	<body>

<p class="select">Nunc pulvinar diam. Mauris condimentum ultricies mi. Nam ultrices, elit sit amet volutpat malesuada, lorem sapien cursus orci, commodo vestibulum magna eros porttitor neque.</p>

	</body>
</html>


PS: Je t'ai rajouté le fait que tu puisses éditer le texte (et si tu veux que ce soit conservé au rafraichissement, alors, il faut transmettre la valeur via Ajax).
Modifié par koala64 (27 Jul 2007 - 14:50)
Sujet clos
Aller à