Question

我正在尝试使此代码无法正常工作。我希望它以这种方式工作，用户右键单击输入，然后将他选择的内容添加到输入中。

$(document).bind("contextmenu", function(e) {
  e.preventDefault();
  console.log(e.pageX + "," + e.pageY);
  $("#cntnr").css("left", e.pageX);
  $("#cntnr").css("top", e.pageY);
  // $("#cntnr").hide(100);        
  $("#cntnr").fadeIn(200, startFocusOut());
});

function startFocusOut() {
  $(document).on("click", function() {
    $("#cntnr").hide();
    $(document).off("click");
  });
}

$("#items > li").click(function() {
  $("#op").text("You have selected " + $(this).text());
});

这是小提琴： http://jsfiddle.net/6ny94/1226/

谢谢

Answer 1

一个非常微小的变化：input有一个值...不是text。

是$("#op").val(...)而不是$("#op").text(...)。

不推荐使用.bind()。使用on()。

$("#op").on("contextmenu",function(e){
  e.preventDefault();
  console.log(e.pageX + "," + e.pageY);
  $("#cntnr").css("left",e.pageX);
  $("#cntnr").css("top",e.pageY);
 // $("#cntnr").hide(100);        
  $("#cntnr").fadeIn(200,startFocusOut());      
});

function startFocusOut(){
  $(document).on("click",function(){
  $("#cntnr").hide();        
  $(document).off("click");
  });
}

$("#items > li").click(function(){
$("#op").val("You have selected "+$(this).text());
});

#items{
  list-style:none;
  margin:0px;
  margin-top:4px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:3px;
  font-size:17px;
  color: #333333;
  
}
hr { width: 85%; 
  background-color:#E4E4E4;
  border-color:#E4E4E4;
    color:#E4E4E4;
}
#cntnr{
  display:none;
  position:fixed;
  border:1px solid #B2B2B2;
  width:150px;      background:#F9F9F9;
  box-shadow: 3px 3px 2px #E9E9E9;
  border-radius:4px;
}

li{
  
  padding: 3px;
  padding-left:10px;
}


#items :hover{
   color: white;
  background:#284570;
  border-radius:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Demo<input id="op">
<div id='cntnr'>
  <ul id='items'>
    <li>Copy</li> 
    <li>paste</li> 
  </ul>
</div>

Answer 2

稍微花一些代码，尝试一下；

更新HTML：

Demo<input id="op"></input>
  <div id='cntnr'>
    <ul id='items'>
      <li class="mitem">Copy</li> 
      <li class="mitem">paste</li> 
    </ul>
  </div>

更新JS：

$(document).bind("contextmenu",function(e){
  e.preventDefault();
  console.log(e.pageX + "," + e.pageY);
  $("#cntnr").css("left",e.pageX);
  $("#cntnr").css("top",e.pageY);
 // $("#cntnr").hide(100);        
  $("#cntnr").fadeIn(200,startFocusOut());      
});

function startFocusOut(){
  $(document).on("click",function(){
  $("#cntnr").hide();        
  $(document).off("click");
  });
}

$(".mitem").click(function(){
$("#op").val("You have selected "+$(this).text());
});

基本上，从上下文菜单中选择的任何内容都会更新输入框的值；您之前还设置了OP的文本，而不是val；那可能是个问题。我刚刚添加了一个类选择器，并使用该选择器将值推入了输入中。

添加上下文菜单，将文本添加到输入

2 个答案: