IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Désactiver le contrôle clavier pour un Javascript


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mars 2008
    Messages
    150
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Mars 2008
    Messages : 150
    Par défaut Désactiver le contrôle clavier pour un Javascript
    Bonsoir,


    J'ai sur une page php un script permettant d'afficher une gallerie photo:
    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
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    // We only want these styles applied when javascript is enabled
    $('div.content').css('display', 'block');
     
    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
    mouseOutOpacity:   onMouseOutOpacity,
    mouseOverOpacity:  1.0,
    fadeSpeed:         'fast',
    exemptionSelector: '.selected'
    });
     
    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
    delay:                     2500,
    numThumbs:                 10,
    preloadAhead:              10,
    enableTopPager:            false,
    enableBottomPager:         false,
    imageContainerSel:         '#slideshow',
    controlsContainerSel:      '#controls',
    captionContainerSel:       '#caption',
    loadingContainerSel:       '#loading',
    renderSSControls:          true,
    renderNavControls:         true,
    playLinkText:              'Slideshow',
    pauseLinkText:             'Pause Slideshow',
    prevLinkText:              '&lsaquo; Previous picture',
    nextLinkText:              'Next Picture &rsaquo;',
    nextPageLinkText:          'Next &rsaquo;',
    prevPageLinkText:          '&lsaquo; Prev',
    enableHistory:             true,
    autoStart:                 false,
    syncTransitions:           true,
    defaultTransitionDuration: 900,
    onSlideChange:             function(prevIndex, nextIndex) {
    // 'this' refers to the gallery, which is an extension of $('#thumbs')
    this.find('ul.thumbs').children()
    .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    .eq(nextIndex).fadeTo('fast', 1.0);
     
    // Update the photo index display
    this.$captionContainer.find('div.photo-index')
    .html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
    },
    onPageTransitionOut:       function(callback) {
    this.fadeTo('fast', 0.0, callback);
    },
    onPageTransitionIn:        function() {
    var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
    var nextPageLink = this.find('a.next').css('visibility', 'hidden');
     
    // Show appropriate next / prev page links
    if (this.displayedPage > 0)
    prevPageLink.css('visibility', 'visible');
     
    var lastPage = this.getNumPages() - 1;
    if (this.displayedPage < lastPage)
    nextPageLink.css('visibility', 'visible');
     
    this.fadeTo('fast', 1.0);
    }
    });
     
    /**************** Event handlers for custom next / prev page links **********************/
     
    gallery.find('a.prev').click(function(e) {
    gallery.previousPage();
    e.preventDefault();
    });
     
    gallery.find('a.next').click(function(e) {
    gallery.nextPage();
    e.preventDefault();
    });
     
    /****************************************************************************************/
     
    /**** Functions to support integration of galleriffic with the jquery.history plugin ****/
     
    // PageLoad function
    // This function is called when:
    // 1. after calling $.historyInit();
    // 2. after calling $.historyLoad();
    // 3. after pushing "Go Back" button of a browser
    function pageload(hash) {
    // alert("pageload: " + hash);
    // hash doesn't contain the first # character.
    if(hash) {
    $.galleriffic.gotoImage(hash);
    } else {
    gallery.gotoIndex(0);
    }
    }
     
    // Initialize history plugin.
    // The callback is called at once by present location.hash. 
    $.historyInit(pageload, "advanced.html");
     
    // set onlick event for buttons using the jQuery 1.3 live method
    $("a[rel='history']").live('click', function(e) {
    if (e.button != 0) return true;
     
    var hash = this.href;
    hash = hash.replace(/^.*#/, '');
     
    // moves to a new page. 
    // pageload is called at once. 
    // hash don't contain "#", "?"
    $.historyLoad(hash);
     
    return false;
    });
     
    /****************************************************************************************/
    });
    </script>
    JSauf que plus bas dans ma page, j'ai un <div> avec la possibilité d'uploader une nouvelle image, et d'insérer dans une base de données un titre, une description en anglais et une autre en français.

    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
    <table class="tg" border="0">
    	<tr>
    		<td width="400" align="center">
    		</br><input class="css_button" type="file" required="required"  name="select" value="<?php if (isset($_POST['select'])) echo htmlentities(trim($_POST['select'])); ?>"></br></br>
    		</td>
    		<td align="center" class="tg-yaw" width="400">
    		</br></br><input class="inputs" type="text" required="required"  maxlength="5" placeholder="IMMAT" name="title" value="<?php if (isset($_POST['title'])) echo htmlentities(trim($_POST['title'])); ?>"></br></br>
    		</td>
    	</tr>
    	<tr>
    		<td align="center">
    		<textarea class="inputss" required="required" placeholder="English Description" name="infos" cols="50" rows="10"><?php if (isset($_POST['infos'])) echo htmlentities(trim($_POST['infos'])); ?></textarea></br></br>
    		</td>
    		<td align="center">
    		<textarea class="inputss" required="required" placeholder="Description en Français" name="infosfr" cols="50" rows="10"><?php if (isset($_POST['infosfr'])) echo htmlentities(trim($_POST['infosfr'])); ?></textarea></br></br>
    		</td>
    	</tr>
    </table>
     
    <input class="css_button" type="submit" value="Enregistrer" name="upload"></br></br>

    PROBLEME: Quand je tape dans ces textareas, je n'ai pas accès à la touche espace, puisqu'elle est monopolisée par le script qui fait changer l'image affichée...

    D'ou ma question; Est-il possible de désactiver le script juste dans ces zones, ou alors de faire en sorte que le clavier ne soit pas reconnu?

  2. #2
    Membre confirmé
    Homme Profil pro
    Inscrit en
    Mars 2008
    Messages
    150
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Mars 2008
    Messages : 150
    Par défaut
    A force d'efforts et de recherche, j'ai fini par trouver:

    Il suffit d'ajouter cette ligne dans le code du java script:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    enableKeyboardNavigation: false,
    Ce qui donne:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    // Initialize Advanced Galleriffic Gallery
    var gallery = $('#thumbs').galleriffic({
    delay:                     2500,
    numThumbs:                 10,
    preloadAhead:              10,
    enableKeyboardNavigation:  false,
    enableTopPager:            false,
    ................

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. contrôle touche clavier pour affichage des images
    Par ghyosmik dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 17/03/2011, 15h47
  2. Réponses: 2
    Dernier message: 18/07/2008, 14h43
  3. [JaVaScRiPt]Désactivation de la croix pour fermer
    Par zybay dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 14/05/2007, 16h42
  4. Réponses: 1
    Dernier message: 05/11/2005, 23h48
  5. [] Raccourci clavier pour bouton d'une barre d'outil
    Par Sébastien dans le forum VB 6 et antérieur
    Réponses: 12
    Dernier message: 24/03/2003, 17h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo