Question

我想在我的文本框中提供类似标记的功能，通过我下载并在我的ASP.NET网络文件夹中添加http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js文件的Stackoverflow，我可以通过我的js函数使用它的所有功能

我遇到的问题是因为我的js代码中有一个事件（ focusout ），目前我需要创建一个on（'focusout'）事件来在我的搜索中添加一个标记框。我也添加了HTML和CSS代码，它们很好，我的问题是使用Javascript代码
代码：
的 HTML：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="tags">
  <input type="text" id="search" />
  </div>
</body>
</html>

CSS：

#tags{
  float:left;
  border:1px solid #ccc;
  padding:5px;
  font-family:Arial;
}
#tags span.tag{
  cursor:pointer;
  display:block;
  float:left;
  color:#000;
  background:#eee;
  padding:5px;
  padding-right:25px;
  margin:4px;
}
#tags span.tag:hover{
  opacity:0.7;
}
#tags span.tag:after{
 position:absolute;
 content:"x";
 border:1px solid;
 padding:0 4px;
 margin:3px 0 10px 5px;
 font-size:10px;
}
#tags input{
  background:#fff;
  border:0;
  margin:4px;
  padding:7px;
  width:auto;
}
#search{
   background:#fff;
  border: 0px;
  width:auto;
  height:auto;
}

JS：

$('#tags input').on('focusout',function(){    
  var txt= $.trim( $(this).val() );
  if(txt){
     $("#search").before('<span class="tag">'+txt+'</span>');
  }
  $(this).prop('value','');  
});


$('#tags').on('click','.tag',function(){
  $(this).remove();
});

问题：

每次用户想要添加时，我都不希望我的用户点击外面标签，我希望通过组合键使其更容易 Ctrl + Enter。我怎么能这样做？

Answer 1

将focusout事件替换为keydown事件：

$('#tags input').keydown(function (e) {
   if(e.ctrlKey && e.keyCode == 13) {
      var txt= $.trim( $(this).val() );
      if(txt){
         $("#search").before('<span class="tag">'+txt+'</span>');
      }
      $(this).prop('value',''); 
   }
});

说明：检查Event对象以查看是否按下了ctrl键：

if(e.ctrlKey

检查同时按下的内容（13是 Ctrl 的键码）：

if(e.ctrlKey && e.keyCode == 13) {

如果两个陈述均为真，那么您可以假设您的用户已按下 Ctrl + Enter 组合。

JSFiddle演示： http://jsfiddle.net/losnir/FxQ62/

仅在预先指定的组合键上添加新标记

1 个答案: