仅在预先指定的组合键上添加新标签答案

【问题标题】：Add a new tag only on a pre-specified key combination仅在预先指定的组合键上添加新标签
【发布时间】：2026-01-28 03:00:02
【问题描述】：

我想在我的文本框中提供类似标签的功能，通过 * 我在我的 ASP.NET Web 文件夹中下载并添加了http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js 文件，我可以通过我的 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。我该怎么做？

【问题讨论】：

标签： javascript jquery css jquery-events keystroke

【解决方案1】：

用keydown 事件替换您的focusout 事件：

$('#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/

【讨论】：

我想我还需要 Keyup 事件。好吧，让我试试
效果很好，请查看我的 JSFiddle。如果您仍有问题，请描述它们。
真的很抱歉，是我的错，我忘了用你的代码更新我的代码......是的......它现在正在工作，谢谢
很高兴我能帮上忙，欢迎来到 *！如果您觉得我的回答有用，请随时将其标记为已接受的答案。