input construit à partir d'une div

**loubigou** · 03/07/2015, 17h27

Bonjour,
Je voudrais savoir si vous connaissez un petit plugin qui permet de simuler le comportement d'un input à partir d'une div.
L'intérêt serait d'éviter l'affichage automatique du clavier sur les supports mobiles.

Le code html serait un truc du genre :

Code :

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

1
2
3
<div id="divinput" class="so-inline-block" style="background:pink; width:10em; height: 1.6em;">
<span id="content" tabindex="1">a</span><span class="blink">|</span>
</div>

Et le code javascript quelque chose du genre :

Code :

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

1
2
3
4
5
6
7
8
function blinker() {
    $('.blink').fadeOut(500);
    $('.blink').fadeIn(500);
}
setInterval(blinker, 1000);
$("#content").on("keypress",function(e) {
  $(this).html($(this).html()+String.fromCharCode(e.which));
});

Le code est dégueulasse

mais l'idée est là...

ça doit bien exister...

**danielhagnoul** · 04/07/2015, 11h19

Exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
        #divInput {
            padding: 0.3em;
            min-width: 10em;
            max-width: 15em;
            min-height: 1.6em;
            max-height: 3.2em; 
            overflow: auto;
            border: 0.1em solid blue;
            cursor: text;
        }
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
            $( "#divInput[contenteditable]" )
                 .data({
                    "dvjhKey" : false,
                    "dvjhLength" : 0
                })
                .on({
                    "focusin" : function(){
                        var jObj = $( this );
 
                        jObj
                            .data( "dvjhLength", jObj.text().length )
                            .one( "keydown", function( event ){
                                $( this ).data( "dvjhKey", true );
                            });
                    },
                    "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 );
                        }
                    },
                    "change" : function( event ){
                        var str = $.trim( $( this ).text() );
 
                        console.log( str );
 
                        alert( str );
                    }
                });
 
        });
 
        $( window ).load( function(){
 
        });
    </script>
</head>
<body>
 
    <form>
        <fieldset>
            <label for="divInput">Votre nom : </label>
            <div id="divInput" tabindex="1" contenteditable></div>
        </fieldset>
    </form>
 
</body>
</html>

**NoSmoking** · 04/07/2015, 11h41

Bonjour,

L'intérêt serait d'éviter l'affichage automatique du clavier sur les supports mobiles.

on saisi comment le texte dans ce cas

PS: Mieux vaut ne pas toucher aux habitudes prises ou à prendre.

**loubigou** · 04/07/2015, 12h05

On répond avec une petite div popup juste en dessous du contrôle, et qui contient juste les boutons pour les chiffres et la virgule. L'intérêt, c'est surtout pour les champs de saisie exclusivement numériques !

**loubigou** · 04/07/2015, 12h07

je regarde ça dans la journée.
C'est toi qui l'a écrit, ou c'est extrait d'un plugin ?
Merci à toi.

**NoSmoking** · 04/07/2015, 12h24

as tu essayé avec un <input type="number"

**danielhagnoul** · 04/07/2015, 15h08

Envoyé par NoSmoking

on saisi comment le texte dans ce cas

**loubigou** · 04/07/2015, 16h55

le petit programme de DanielHagnoul marche bien, à ce que j'ai pu tester.
Merci beaucoup !

**danielhagnoul** · 04/07/2015, 21h34

Le code fonctionne bien, je l'utilise depuis longtemps, mais je travaille uniquement sur ordinateur et j'avais "zappé" un point important : "L'intérêt serait d'éviter l'affichage automatique du clavier sur les supports mobiles."

Envoyé par NoSmoking

Bonjour,

on saisi comment le texte dans ce cas

PS: Mieux vaut ne pas toucher aux habitudes prises ou à prendre.

Ces remarques doivent être prises en considération.

input construit à partir d'une div

JavaScript

Discussions similaires

Partager

Partager