javascript - 在输入标签中突出显示每封电子邮件

Question

所以，我要对输入标签做的是在其中插入尽可能多的电子邮件地址。

      <input type="text" name="email-tags"/>

为了使它更加用户友好，我想用蓝色突出显示其中键入的每个电子邮件，它看起来类似于 SO 问题中的标签，也有 x 按钮来删除标签。

任何人都可以帮助我如何使用 javascript 执行此操作吗？

提前致谢。

Answer 1

这段代码实际上可以满足您的需求。这是相当先进的。我希望它适合你的需要。 document.getElementById("test").value 在此示例中包含数组中的电子邮件地址。

function setInputEmailToExtendedInput()
{
	var inputs = document.querySelectorAll("input[data-type='email']");
	Array.prototype.slice.call(inputs).forEach(function(element){
		var node = new emailInput();
		if (element.id)
		{
			node.container.id = element.id;
		}
		if (element.className)
		{
			node.container.className = element.className;
		}			
		element.parentElement.replaceChild(node.container, element);
	});
}

	function emailInput() {
	  this.container = document.createElement("div");
	  this.container.input = document.createElement("input");
	  this.container.input.type = "text";
	  this.container.style.overflowY = "auto";
	  this.container.input.className = "email_input";
	  this.container.appendChild(this.container.input);

	  this.container.input.addEventListener("keydown", checkKeyUpOnEmailInputDisable(this), false);

	  this.evaluateTag = evaluateEmailFunction;
	  this.deleteTag = deleteEmailFunction;
	  this.container.input.addEventListener("paste", emailEvaluateOnChange(this), false);

	  Object.defineProperty(this, "value", {
	    value: [],
	    enumerable: false
	  });

	  Object.defineProperty(this, "placeholder", {
	    get: function() {
	      this.container.input.placeholder;
	    },
	    set: function(value) {
	      this.container.input.placeholder = value;
	    },
	    enumerable: false
	  });

	}

	function emailEvaluateOnChange(obj, e) {
	  return function(e) {
	    obj.evaluateTag(e.target.value);
	  }
	}

	function checkKeyUpOnEmailInputDisable(obj, e) {
	  return function(e) {
	    if (e.keyCode == 13 || e.keyCode == 32) //either enter or space
	    {
	      obj.evaluateTag(e.target.value);
	      return false;
	    } else if (e.keyCode == 8) //backspace
	    {
	      if (e.target.value.length == 0 && obj.value.length > 0) //length of the input is zero.
	      {
	        //delete tag.
	        obj.deleteTag();
	        return true;
	      }
	    } else if (e.keyCode == 27) //escape
	    {
	      //hide the input helper and blur the input.
	      e.target.blur();
	      e.preventDefault();
	      return false;
	    }
	  };
	}

	function deleteEmailFunction(tag) {
	  if (!tag) {
	    //delete the last tag
	    var tag = this.value.length - 1;
	  }
	  this.container.removeChild(this.container.querySelectorAll(".email_element")[tag]);
	  this.value.splice(tag, 1);
	  if (this.value.length > 0) {
	    var marginNode = parseInt(getComputedStyle(this.container.children[0]).getPropertyValue("margin-right"));
	    var width = parseInt(this.container.children[0].offsetLeft) * 2; //default padding
	    for (var i = 0; i < this.value.length; ++i) {
	      //calculate the width of all tags.
	      width += parseInt(this.container.children[i].offsetWidth) + marginNode;
	    }
	    this.container.input.style.width = (this.container.offsetWidth - width) - 20 + "px";
	  } else {
	    this.container.input.style.width = "100%";
	  }
	  this.container.input.focus();
	}

	function createEmail(value) {
	  var node = document.createElement("span");
	  node.className = "email_element";
	  node.innerHTML = value;
	  return node;
	}

	function evaluateEmailFunction(tagValue) {

	  if (tagValue.match(/[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/ig)) {
	    //email is valid add
	    var node = createEmail(tagValue.trim());
	    this.container.insertBefore(node, this.container.input);
	    this.value.push(tagValue);
	    var marginNode = parseInt(getComputedStyle(node).getPropertyValue("margin-right"));
	    var width = parseInt(this.container.children[0].offsetLeft) * 2; //default padding
	    for (var i = 0; i < this.value.length; ++i) {
	      //calculate the width of all tags.
	      width += parseInt(this.container.children[i].offsetWidth) + marginNode;
	    }
	    //set the width of the tag input accordingly.
	    this.container.input.style.width = (this.container.offsetWidth - width) - 20 + "px";
	    this.container.input.value = "";
	    this.container.input.focus();
	  }
	}

	RegExp.escape = function(s) {
	  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
	};


    window.addEventListener("load", function(){setInputEmailToExtendedInput()}, false);       

		div.email_builder {
		  width: 500px;
		  height: 36px;
		  background-color: #ffffff;
		  border: 1px solid #777777;
		  box-sizing: border-box;
		}
		input.email_input {
		  padding: 8px 8px 8px 8px;
		  border: 0px solid transparent;
		  width: 100%;
		  box-sizing: border-box;
		  font-size: 11pt;
		}
		span.email_element {
		  display: inline-block;
		  padding: 6px 2px 6px 2px;
		  margin-right: 4px;
		  color: #0059B3;
		  font-size: 10pt;
		  white-space: nowrap;
		  cursor: pointer;
		  box-sizing: border-box;
		}
		span.email_element > span.email_remove_button {
		  color: #000000;
		  font-size: 10pt;
		  white-space: nowrap;
		  cursor: pointer;
		  padding-left: 12px;
		  font-size: 14px;
		  font-weight: bold;
		}
		span.email_element > span.email_remove_button:hover {
		  color: #660000;
		  font-size: 10pt;
		  white-space: nowrap;
		  cursor: pointer;
		  padding-left: 12px;
		  font-size: 14px;
		  font-weight: bold;
		}

<input type="text" class="email_builder" id="test" data-type="email" />