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 dexercices</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> |
Partager