如何点击回车键添加非HTML标签并将其保存为字符串格式？

Got it, let's adjust this code to work with the Enter key instead of commas, plus add functionality to save your tags as a string. Here's how to make it happen:

Key Tweaks & Additions #

• Swap the comma keycode (188) with the Enter keycode (13)
• Block the default Enter key behavior (like accidental form submissions)
• Add logic to track and update your tag string whenever tags are added or removed

Full Working Implementation #

<div id="textarea">
  <input type="text" placeholder="Type a tag and press Enter">
  <!-- Hidden input to store the comma-separated tag string (or use a JS variable) -->
  <input type="hidden" id="savedTags">
</div>

<style>
#textarea {
  border: 1px solid #eee;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#textarea input[type="text"] {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 4px;
}
#textarea button {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}
#textarea button:hover {
  background: #e8e8e8;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Helper function to update the saved tag string
function updateSavedTags() {
  const tagTexts = [];
  $('#textarea button').each(function() {
    tagTexts.push($(this).text());
  });
  // Convert tag array to comma-separated string
  const tagString = tagTexts.join(',');
  $('#savedTags').val(tagString);
  // Optional: Log to console to verify
  console.log('Current saved tags:', tagString);
}

// Handle Enter key to add tags
$('#textarea input[type="text"]').on('keyup', function(e) {
  const key = e.which;
  if (key === 13) {
    e.preventDefault(); // Stop default form submit behavior
    const tagContent = $(this).val().trim();
    // Only add non-empty tags
    if (tagContent) {
      $('<button/>').text(tagContent).insertBefore($(this));
      $(this).val('').focus(); // Clear input and keep focus
      updateSavedTags(); // Update storage after adding
    }
  }
});

// Handle tag removal
$('#textarea').on('click', 'button', function(e) {
  e.preventDefault();
  $(this).remove();
  updateSavedTags(); // Update storage after removing
  return false;
});
</script>

What This Does #

• Enter Key Trigger: Pressing Enter converts the input text into a clickable tag button, clears the input, and keeps focus for quick tag entry.
• Tag String Storage: Every time you add or delete a tag, the updateSavedTags function collects all tag text, joins them into a comma-separated string, and saves it to a hidden input (you can also use a JavaScript variable if you don't need it in the DOM).
• Cleaner UX: Added basic styling for tags to make them look more polished, and we skip empty tags to avoid clutter.

内容的提问来源于stack exchange，提问作者Shalini Raj