右键点击jquery
问题描述:
我想创建一个上下文菜单,当我右键单击文本框。我做了它,当我点击,我可以选择使用鼠标,但我需要它使用键和键。右键点击jquery
$(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()"
这里右击工程整页bcoz我已经给身体上,如何使文本框的工作。如果你只想要一个文本框,然后将其绑定到该文本框您希望这样
答
:
$("#yourtextboxid").bind(
,并重点向上和向下,我认为你需要将它绑定到整个文件,然后使用一些标志或自定义变量决定了你应该做什么,当你上升或下降的时候你应该做的天气!
你有没有尝试过这样的事情(对于keyup和down)?
.bind("keypress",function(event){
var key=event.keyCode || event.which;
if(key==38){ //UP
}
else{if(key==40){ //DOWN
}}
}
答
这比将所有内容绑定到文档稍微复杂一点。我为你提供了大量的评论a demo。
这是基本的想法:
- 输入框查找上下文菜单和菜单键(导航,选择和取消)事件。
- 内容菜单查找鼠标事件
- 该文件将查找键和鼠标事件关闭菜单
此代码的唯一要求是,每个输入需要一个唯一的标识符(ID在此案件)。
下面是脚本:
$(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();
}
});
});
答
$('#div1,#div2').on('contextmenu', function (e) {
e.stopPropagation();
e.
$('#log').append('<p>' + e.target.id + ' triggered contextmenu!</p>');
return false;
});
在结尾处加上返回false。 它不会允许上下文菜单中显示
$( “#firstbox”)结合( “按键”,功能(事件){ VAR键= event.keyCode || event.which; 如果(键= = 38){// UP $( “#firstbox”)结合( “文本菜单”,功能(事件){ event.preventDefault(); $( “