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> |
Simulation d'un "input" multi lignes avec une division éditable
Répondre avec citation
Partager