Simulation d'un "input" multi lignes avec une division éditable
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. :aie:
Code:
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> |
Création d'un événement "change"
Code:
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> |
