clic droit jquery

Question

J'essaye de créer un menu contextuel, quand je clique droit sur la zone de texte. Je l'ai fait quand je clique, je suis capable de choisir using la souris mais j'en ai besoin en utilisant la clef en haut.

$(window).load(function(){ 
$(document).bind("contextmenu", function(event) { 
    event.preventDefault(); 
    $("<div class='custom-menu'>Custom menu</div>") 
     .appendTo("body") 
     .css({top: event.pageY + "px", left: event.pageX + "px"}); 
}).bind("click", function(event) { 
    $("div.custom-menu").hide(); 
}); 
}).bind("keyup",function(event) { 
    $("div.custom-menu").hide(); 
}); 
}).bind("keydown",function(event) { 
    $("div.custom-menu").hide(); 
}); 
    }); 

html

input type="text" name="firstbox" id="firstbox" onclick="append()" 

ici que clic droit fonctionne à la page entière bcoz j'ai donné corps, comment faire pour que le travail sur zone de texte.

Answer 1

si vous voulez seulement pour une zone de texte, puis le lier uniquement à cette zone de texte que vous souhaitez comme ceci:

$("#yourtextboxid").bind(

et pour la clé de haut en bas, je pense que vous devez le lier à document entier, puis en utilisant Certains drapeaux ou variables personnalisées déterminent le temps que vous devez faire quand vous montez ou descendez!

Avez-vous essayé quelque chose comme ça (pour le clavier et le clavier)?

.bind("keypress",function(event){ 
    var key=event.keyCode || event.which; 
    if(key==38){ //UP 

    } 
    else{if(key==40){ //DOWN 

    }} 
} 

Answer 2

C'est un peu plus compliqué que de simplement lier tout le document. J'ai mis a demo pour vous avec beaucoup de commentaires.

Ceci est l'idée de base:

• La zone de saisie cherche les touches menu contextuel et menu (navigation, sélection et annulation) événements.
• Le menu contenu recherche des événements de souris
• Le document cherche les événements clés et de la souris pour fermer le menu

La seule condition pour ce code est que chaque entrée a besoin d'un identifiant unique (ID dans ce Cas).

Voici le script:

$(document).ready(function(){ 

    // cache menu object 
    var contextMenu = $(".custom-menu"), 
    // select menu item (handles selected class) 
    selectItem = function(el){ 
    el 
    .addClass('selected') 
    .siblings() 
    .removeClass('selected') 
    }, 
    // add menu item text to input - or whatever you wanted to do 
    addItem = function(item){ 
    // select item 
    selectItem(item); 
    var txt = item.text(); 
    // data-id attribute has the input ID where it is attached 
    $('#' + contextMenu.attr('data-id')).val(txt); 
    contextMenu.fadeOut('slow'); 
    }; 

    $(".inputbox") 
    .bind("contextmenu", function(event){ 
    event.preventDefault(); 
    var $this = $(this); 
    contextMenu 
    // save ID of input for addItem function 
    .attr('data-id', this.id) 
    // position the menu below the input box, not at the mouse position 
    .css({ 
     top: $this.position().top + $this.outerHeight() + "px", 
     left: $this.position().left + "px" 
    }) 
    .show(); 

    // resets the selected menu item to the first item 
    selectItem(contextMenu.find('li').eq(0)); 

    }) 
    .bind("keyup", function(event){ 

    // escape closes the menu 
    if (event.which === 27) { contextMenu.fadeOut('slow'); return; } 

    // ignore key inside input if menu is hidden or key is not up, down or enter 
    if (contextMenu.is(':hidden') || event.which !== 38 && event.which !== 40 && event.which !== 13) { return; } 

    // get menu items 
    var items = contextMenu.find('li'), 
    sel = contextMenu.find('.selected'), 
    item = items.index(sel); 

    // enter was pressed, add selected item to input 
    if (event.which === 13) { addItem(sel); return; } 
    // up arrow pressed 
    item += (event.which === 38 && item - 1 >= 0) ? -1 : 0; 
    // down arrow pressed 
    item += (event.which === 40 && item < items.length - 1) ? 1 : 0; 
    // select menu item 
    selectItem(items.eq(item)); 

    }); 

    // Context menu: hide and make the choices clickable 
    contextMenu 
    .hide() 
    .find('li') 
    .bind('click', function(){ 
    addItem($(this)); 
    }) 
    .hover(function(){ 
    $(this).addClass('hovered'); 
    },function(){ 
    $(this).removeClass('hovered'); 
    }); 

    $(document).bind("click keyup", function(event) { 
    // ignore if this happens inside an inputbox class 
    if (!$(event.target).is('.inputbox')) { 
     contextMenu.hide(); 
    } 
    }); 

}); 

Answer 3

$('#div1,#div2').on('contextmenu', function (e) { 
    e.stopPropagation(); 
    e. 
    $('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>'); 
    return false; 
}); 

add return false à la fin. il ne permettra pas le menu contextuel pour afficher