0

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

我遇到的问题是因为focusout我的 js 代码中有一个事件（），目前我需要创建一个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。我怎样才能做到这一点 ？

4

1 回答 1

0

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/

于 2013-08-16T14:41:50.983 回答