[JavaScript] Simulation d'un "input" multi lignes avec une division éditable

danielhagnoul · 14/12/2012, 00h14

Simulation d'un "input" multi lignes avec une division éditable

Utilise l'attribut "contenteditable" d'HTML5.

L'utilisation du jQuery n'est pas obligatoire, on peut faire la même chose avec du Vanilla JS, du HTML5 et du CSS.

Il suffit de copier-coller mon code pour tester.

L'avantage par rapport à un textarea ? Je ne me suis pas encore posé la question.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; /*border:0.1rem dotted grey;*/ }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { min-height:35rem; }
			.table1 article { min-width:40rem; max-width: 60rem; vertical-align:top; }
 
			/* TEST */
			fieldset { border: 0.1rem solid yellow; }
			#divInputID { padding: 0.6rem; min-width: 15rem; max-width: 25rem; min-height: 2rem; max-height: 20rem; 
				overflow: auto; border: 0.1rem solid gray; cursor: text; }
		</style> 
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article>
 
						<form>
							<fieldset>
								<label>Taper votre message : </label>
								<div id="divInputID" contenteditable></div>
							</fieldset>
						</form>
 
					</article>
					<article>
 
						<div></div>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-13T23:58:38.281+01:00" pubdate>2012-12-13T23:58:38.281+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
 
				$( "#divInputID" ).on( "focusout", function( event){
					$( "article:last > div").text( $( this ).text() );
				});
 
			});
		</script>
	</body>
</html>

danielhagnoul · 14/12/2012, 23h54

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<meta name="author" content="Daniel Hagnoul">
		<title>Forum jQuery</title>
		<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
		<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
		<style>
			.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
			article { display:table-cell; text-align:justify; /*border:0.1rem dotted grey;*/ }
			.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
			.ligne { display:table-row; }
 
			.table1 .ligne { min-height:35rem; }
			.table1 article { min-width:40rem; max-width: 60rem; vertical-align:top; }
 
			/* TEST */
			fieldset { border: 0.1rem solid yellow; }
			#divInputID { padding: 0.6rem; min-width: 15rem; max-width: 25rem; min-height: 2rem; max-height: 20rem; 
				overflow: auto; border: 0.1rem solid gray; cursor: text; }
		</style> 
	</head>
	<body>
		<h1>Forum jQuery</h1>
		<h2>Titre 2</h2>
		<section class="conteneur">
			<section class="table1">
				<section>
					<article>
 
						<form>
							<fieldset>
								<label>Taper votre message : </label>
								<div id="divInputID" contenteditable></div>
							</fieldset>
						</form>
 
					</article>
					<article>
 
						<div></div>
 
					</article>
				</section>
			</section>
		</section>
		<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
			<time datetime="2012-12-13T23:58:38.281+01:00" pubdate>2012-12-13T23:58:38.281+01:00</time>
			<span itemprop="name">Daniel Hagnoul</span>
			<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
			<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
			<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
			<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
		</footer>
		<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
		<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
		<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
		<script>
			"use strict";
 
			$(function(){
 
				$( "[contenteditable]" )
					.data( "dvjhKey", false )
					.data( "dvjhLength", 0 )
					.on( "focusin", function(){
						var jObj = $( this );
 
						jObj
							.data( "dvjhLength", jObj.text().length )
							.one( "keydown", function( event ){
								$( this ).data( "dvjhKey", true );
							});
					})
					.on( "focusout", function( event ){
						var jObj = $( this ),
							lengthFinal = jObj.text().length,
							lengthOrigine = jObj.data( "dvjhLength" );
 
						if ( jObj.data( "dvjhKey" ) == true || lengthFinal != lengthOrigine ){
							jObj
								.trigger( $.Event( "change" ) )
								.data( "dvjhKey", false );
						}
					})
					.on( "change", function( event ){
						$( "article:last > div").text( $( this ).text() );
					});
 
			});
		</script>
	</body>
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email