Search bar with tags

Searchbar with tags in a stackoverflow-like fashion.

HTML

<div class="tag-field"></div>

CSS

html {
  box-sizing: border-box;
}
*, ::before, ::after {
  box-sizing: inherit;
}

.tag-field {
  border: 1px solid #333;
  border-radius: 2px;
  display: inline-block;
  font-family: 'Roboto';
  font-size: 14px;
  overflow: hidden;
  padding: 3px;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
}

.tag-field__tag {
  color: white;
  background-color: #248;
  display: inline-block;
  margin: 2px 2px 0 2px;
  padding: 3px;
}
.tag-field__input {
  background: transparent;
  border: 0;
  font: inherit;
  outline: 0;
  margin: 2px 2px 0 2px;
  padding: 3px;
}

JavaScript

var tagField = document.querySelector('.tag-field');
var tagFieldInput= document.querySelector('.tag-field__input');
var maxTagCount = Infinity;

tagFieldInput.addEventListener('keydown', function (e) {
  var val = tagFieldInput.value.trim();
	if (val !== '' && (e.key === ' ' || e.key === ',')) {
  	if (tagField.querySelectorAll('.tag-field__tag').length < maxTagCount) {
      let tag = document.createElement('span');
      tag.className = 'tag-field__tag';
      tag.textContent = val;
      tagFieldInput.value = '';
      tagField.insertBefore(tag, tagFieldInput);
      e.preventDefault();
    }
  } else if (e.key === 'Backspace' && tagFieldInput.value === '') {
  	let tags = tagField.querySelectorAll('.tag-field__tag');
    if (tags.length !== 0) {
    	let tag = tags[tags.length - 1];
      tagFieldInput.value = tag.textContent;
      tag.parentNode.removeChild(tag);
      e.preventDefault();
    }
  }
});