We Keep Coding

How to remove the undefined that is added to strings in an array (for no reason, from my knowledge)?

I have this code, it should work well, but it doesn't and I can't find out why. I also should mention that this does use the prismjs library. I customized it to let my created HTML element of codeform to be used like the pre element in the library.
The prismjs library has no role in the problem, it is just a syntex highlighter used to format the output.
function codeform123() {
var cod = document.querySelectorAll("codeform");
for (let i=0; i < cod.length; i++) {
var type = cod[i].getAttribute("type");
var content = cod[i].innerHTML.split(/\n/||/\r/||/\n\r/||/\r\n/);
cod[i].innerHTML = "";
for (let ii=0; ii < content.length; ii++) {
if (content[ii] != "") {
var thisLine = content[ii].split("");
const splited = [];
var splitedNum = 0;
var sa = 0;
var sb = 1;
var back = 0;
var iii;
for (iii=0; iii<thisLine.length; iii++) {
if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null) {continue;}
if (thisLine[iii] == " " && back == 0) {
splited[sa+splitedNum] += thisLine[iii];
} else {
if (thisLine[iii] != " " || thisLine[iii+1] != " ") {
back = 1;
if (iii==0) {
sa=1;
sb=0;
}
splited[sb+splitedNum] += thisLine[iii];
} else {
splitedNum+=2;
splited[sa+splitedNum] += thisLine[iii];
back = 0;
}
}
}
for (iii=0; iii<splited.length; iii++) {
if (splited[iii].includes(" ")) {
cod[i].innerHTML += splited[iii];
} else {
var code = document.createElement("code");
code.classList = "language-"+type;
code.innerHTML = splited[iii];
cod[i].appendChild(code);
}
}
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
} else {
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
}
}
}
}
codeform123();
codeform {
display: block;
color: #f8f8f2;
background: #272822;
margin: 1em 0;
padding: 4px;
border-radius: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
<codeform type="css">#test {
width: 1px;
height: 1px;
}</codeform>
As you can see in the code snippet above, it is returning this:
undefined#test {
undefined undefinedwidth: 1px;
undefined undefinedheight: 1px;
undefined}
However, I would like it to return this:
#test {
width: 1px;
height: 1px;
}
So, how do I get it to work the way that I want? As I don't understand where the undefineds come from. I believe the problem is when the strings are reconstructed into the array splited. As I have looked at the thisLine array and have seen that there are no undefineds, so where do they come from?
It should be noted that I have tried using .slice() and yes it did work when I placed them where the strings are added back to the codeform element. When I did add them, the code snippet would look like this:
function codeform123() {
var cod = document.querySelectorAll("codeform");
for (let i=0; i < cod.length; i++) {
var type = cod[i].getAttribute("type");
var content = cod[i].innerHTML.split(/\n/||/\r/||/\n\r/||/\r\n/);
cod[i].innerHTML = "";
for (let ii=0; ii < content.length; ii++) {
if (content[ii] != "") {
var thisLine = content[ii].split("");
const splited = [];
var splitedNum = 0;
var sa = 0;
var sb = 1;
var back = 0;
var iii;
for (iii=0; iii<thisLine.length; iii++) {
if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null) {continue;}
if (thisLine[iii] == " " && back == 0) {
splited[sa+splitedNum] += thisLine[iii];
} else {
if (thisLine[iii] != " " || thisLine[iii+1] != " ") {
back = 1;
if (iii==0) {
sa=1;
sb=0;
}
splited[sb+splitedNum] += thisLine[iii];
} else {
splitedNum+=2;
splited[sa+splitedNum] += thisLine[iii];
back = 0;
}
}
}
for (iii=0; iii<splited.length; iii++) {
if (splited[iii].includes(" ")) {
cod[i].innerHTML += splited[iii].slice(9);
} else {
var code = document.createElement("code");
code.classList = "language-"+type;
code.innerHTML = splited[iii].slice(9);
cod[i].appendChild(code);
}
}
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
} else {
if (ii != (content.length-1)) {cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";}
}
}
}
}
codeform123();
codeform {
display: block;
color: #f8f8f2;
background: #272822;
margin: 1em 0;
padding: 4px;
border-radius: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
<codeform type="css">#test {
width: 1px;
height: 1px;
}</codeform>
In this second code snippet, it does what I want, but I am wondering if there is a better way to do it, meaning fixing the problem without using .slice() right before the string is added back into the codeform element.

Your code is very hard to follow, but I suspect that the splitedNum += 2 line is the problem because it risks creating an array with holes, and the holes will end up showing up as undefined. But I can't say I understand what your code is doing.
There is also several problems in your code, for instance:
cod[i].innerHTML.split(/\n/||/\r/||/\n\r/||/\r\n/)
and
cod[i].innerHTML += "\n"||"\r"||"\n\r"||"\r\n";
do not do what you think they do.
if (content != "")
is always true as content is an array.
if (thisLine[iii] == "undefined" || thisLine[iii] == undefined || thisLine[iii] == null)
All those make no sense because thisLine[iii] is a one-character string.

The javascript code for cookie acceptance is correct but does not work, instead there is a strange error

The javascript code for cookie acceptance is ok but not working, instead I find this console error :
The use of drawWindow method of CanvasRenderingContext2D is deprecated. Use the tabs.captureTab API for extensions instead https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/captureTab pagedata-script.js:1:12465
I don't know where or why it comes from but my javascript code does not run.
If someone has an idea.
Here is the code below :
HTML
<div id="consent-popup" class="hidden dark">
<img src="_images/cookie.png"/>
<p>By using this site, you agree to our Terms of Service.<br>
Please <a id="accept" href="#">Accept</a> before using the site.
</p>
</div>
CSS
#consent-popup {
position: fixed;
display: inline-flex;
bottom: 3.5rem;
right: 0;
padding: 25px 5% 25px 25px;
width: 40vw;
box-shadow: -2px 5px 10px 5px #19233e;
background-color: #FFFFFF;
transition: all 1s ease;
}
#consent-popup.hidden {
transform: translate(100%, 0);
opacity: 0;
}
#consent-popup > img {
margin: 0 25px 0 0;
width: 50px;
height: 50px;
}
#consent-popup > p {
margin: 0;
font-family: ArialLight;
font-size: 1rem;
color: #000000;
text-align: left;
}
#consent-popup > p > a {
color: #dbdce8;
}
Javascript
//accept_cookies.js
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function setCookie(cname, cvalue, exdays){
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=None;secure=" + true + ";";
}
function isAccept(cname){
//console.log(getCookie(cname));
if(getCookie(cname) == "true"){
return true;
}
else{
return false;
}
}
window.onload = () => {
function acceptFn(){
setCookie("abc_consent", true, 7);
consentPopup.classList.add('hidden');
}
const consentPopup = document.getElementById('consent-popup');
const acceptBtn = document.getElementById('accept');
acceptBtn.addEventListener('click', acceptFn);
if (!isAccept("bdc_consent")) {
setTimeout(() => {
consentPopup.classList.remove('hidden');
}, 2000);
}
};
The only external scripts are those of bootstrap and ajax googleapis:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
"https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
Thanks.

There was a conflict with another javascript function in another file that used the window.onload = () => {} function
to create an animation.
So I remove it.

Is there any way to know how many characters are retained or visible after text-overflow:ellipsis and overflow:hidden is applied?

I have a string of email addresses separated by a delimiter ';' and want to show all text as it is. Also want to clip any overflow text over one line and then show +count of emails ids remaining that user did not get to see(driven by some # and ; character logic). Is there any way to know how many characters are retained/ or even removed from the HTML text after the it is clipped ?

I don't know what is your criteria exactly, but here is an example of how it can be calculated:
var span = document.getElementById("text");
var countSpan = document.getElementById("count");
var orig = span.innerText;
var vis = orig;
while(vis.length && span.scrollWidth > parseFloat(window.getComputedStyle(span).width))
{
vis = vis.slice(0,-1);
span.innerText = vis + "....";
}
span.innerText = orig;
var visibleText = vis;
var truncatedText = orig.replace(new RegExp("^" + vis.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')), "");
var visibleCleanLessText;
var visibleCleanMoreText;
var truncatedCleanLessText;
var truncatedCleanMoreText;
if (truncatedText === "" || truncatedText.substr(0, 1) == ";")
{
visibleCleanLessText = vis;
visibleCleanMoreText = vis;
truncatedCleanLessText = truncatedText.substr(1);
truncatedCleanMoreText = truncatedCleanLessText;
}
else
{
var m = vis.match(/;([^;]*)$/);
visibleCleanLessText = m ? vis.replace(/;[^;]*$/, "") : "";
visibleCleanMoreText = vis + (truncatedText.match(/^([^;]*);/) || ["",""])[1];
truncatedCleanMoreText = (m ? m[1] : vis) + truncatedText;
truncatedCleanLessText = truncatedText.replace(/^[^;]*;/, "");
}
var truncatedCount = truncatedCleanMoreText === "" ? 0 : truncatedCleanMoreText.split(";").length;
if (truncatedCount)
{
countSpan.innerText = "+" + truncatedCount;
span.title = orig;
}
console.log("orig ", orig);
console.log("visible ", vis);
console.log("truncated ", truncatedText);
console.log("visibleCleanLess ", visibleCleanLessText);
console.log("truncatedCleanMore", truncatedCleanMoreText);
console.log("visibleCleanMore ", visibleCleanMoreText);
console.log("truncatedCleanLess", truncatedCleanLessText);
div
{
vertical-align: middle;
}
.truncate
{
width: 300px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.count:empty
{
display: none;
}
.count
{
display: inline-block;
position: relative;
font-family: monospace;
font-size: 90%;
left: -0.5em;
border: 1px solid black;
border-radius: 0.3em;
padding: 0.1em;
}
<div>
<span id="text" class="truncate">email1#example.com;email2#example.com;email3#example.com;email4#example.com</span>
<span id="count" class="count"></span>
</div>

javascript input mask currency

i got this error on input.value and input.length:
scripts.js:151 Uncaught TypeError: Cannot read property 'length' of
undefined
I'm trying to apply a currency mask to an input, but I'm getting errors
function formatNumber(n) {
// format number 1000000 to 1,234,567
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
function formatCurrency(input, blur) {
// appends $ to value, validates decimal side
// and puts cursor back in right position.
// get input value
var input_val = input.value;
console.log(input)
// don't validate empty input
if (input_val === "") { return; }
// original length
var original_len = input_val.length;
// initial caret position
var caret_pos = input.getAttribute("selectionStart");
// check for decimal
if (input_val.indexOf(".") >= 0) {
// get position of first decimal
// this prevents multiple decimals from
// being entered
var decimal_pos = input_val.indexOf(".");
// split number by decimal point
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);
// add commas to left side of number
left_side = formatNumber(left_side);
// validate right side
right_side = formatNumber(right_side);
// On blur make sure 2 numbers after decimal
if (blur === "blur") {
right_side += "00";
}
// Limit decimal to only 2 digits
right_side = right_side.substring(0, 2);
// join number by .
input_val = "$" + left_side + "." + right_side;
} else {
// no decimal entered
// add commas to number
// remove all non-digits
input_val = formatNumber(input_val);
input_val = "$" + input_val;
// final formatting
if (blur === "blur") {
input_val += ".00";
}
}
// send updated string to input
input.value(input_val);
// put caret back in the right position
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input[0].setSelectionRange(caret_pos, caret_pos);
}
(function initalize() {
// IIFE method
let input = document.querySelector("input[data-type='currency']")
input.addEventListener("keyup", () => {
formatCurrency(this);
})
input.addEventListener("keyup", () => {
formatCurrency(this, "blur");
})
})();
.textfield_label {
font-family: "Poppins";
color: #a3a3a3;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.material-textfield {
font-family: "Poppins";
position: relative;
margin-bottom: 30px;
color: #a3a3a3;
}
.material-textfield label {
font-family: "Poppins";
position: absolute;
font-size: 1.2rem;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #fff;
border-radius: 5px;
color: gray;
padding: 0 0.3rem;
margin: 0 0.5rem;
transition: 0.1s ease-out;
transform-origin: left top;
pointer-events: none;
}
.material-textfield input {
font-family: "Poppins";
width: 100%;
font-size: 1rem;
outline: none;
border: 1px solid #ffb24f;
border-radius: 5px;
background: #00416a;
padding: 1rem 0.7rem;
color: #ffb24f;
transition: 0.1s ease-out;
}
.material-textfield::before {
background: none;
border: 1px solid #ffb24f;
content: "";
display: block;
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
pointer-events: none;
}
.material-textfield input:focus {
border-color: #ebb76e;
}
.material-textfield input:focus + label {
color: #ebb76e;
top: 0;
transform: translateY(-50%) scale(0.9);
background: linear-gradient(
180deg,
rgba(235, 235, 235, 1) 0%,
rgba(235, 235, 235, 1) 50%,
rgba(255, 255, 255, 1) 50%,
rgba(255, 255, 255, 1) 100%
);
}
.material-textfield input::placeholder{
color:#ebb76e;
}
<div class="input_renda">
<h3 class="textfield_label">
value
</h3>
<div class="material-textfield">
<input type="text" name="currency-field" id="currency-field" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder=" $1,000,000.00" />
</div>
</div>
but I don't know why the input. value is not working,
why do I get the element with the query selector
If anyone can help me with this I'm happy

You can use the following function to mask currencies numbers:
export const moneyMask = (value: string) => {
value = value.replace('.', '').replace(',', '').replace(/\D/g, '')
const options = { minimumFractionDigits: 2 }
const result = new Intl.NumberFormat('pt-BR', options).format(
parseFloat(value) / 100
)
console.log(result)
return 'R$ ' + result
}

This bug is caused by the improper use of the this keyword inside:
let input = document.querySelector("input[data-type='currency']")
input.addEventListener("keyup", () => {
formatCurrency(this);
})
Here you're trying to pass the input object as a parameter to the formatCurrency function but this doesn't refer to it. To get a reference you need to use the special e parameter for the callback function and access it using e.target which holds a reference to the object that caused the event.
e.g.
let input = document.querySelector("input[data-type='currency']")
input.addEventListener("keyup", (e) => {
formatCurrency(e.target);
})
Furthermore, later on in your script you're trying to assign a value back to the input object by:
input.value(input_val);
With the above you're actually trying to call a function named value() - to change the .value property of your object you need to do it like this:
input.value=input_val;

Simple demo of usage of the built-in currency mode of .toLocaleString().
currencyfield.addEventListener("input", format, false)
function format (){
let val = +currencyfield.value;
document.querySelector(".textfield_label").textContent = val.toLocaleString('fullwide', {maximumFractionDigits:2, style:'currency', currency:'USD', useGrouping:true})
}
<div class="input_renda">
<h3 class="textfield_label">$0.00</h3>
<div class="material-textfield">
<input type="text" name="currency-field" id="currencyfield" value="" data-type="currency" placeholder=" $1,000,000.00" />
</div>
</div>

let input = document.getElementsByClassName("productPrice");
console.log(input.length);
for (var i = 0; i < input.length; i++) {
input[i].addEventListener("keyup", (e) => { formatCurrency(e.target); });
input[i].addEventListener("keypress", (e) => { formatCurrency(e.target); });
}
function formatNumber(n) {
// format number 1234567,89 to 1 234 567,89
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, " ")
}
function formatCurrency(input) {
var input_val = input.value;
if (input_val === "") { return; }
var original_len = input_val.length;
var caret_pos = input.selectionStart;
if (input_val.indexOf(",") >= 0) {
var decimal_pos = input_val.indexOf(",");
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);
left_side = formatNumber(left_side);
right_side = formatNumber(right_side);
right_side = right_side.substring(0, 2);
input_val = left_side + "," + right_side;
} else {
input_val = formatNumber(input_val);
}
input.value = input_val;
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input.setSelectionRange(caret_pos, caret_pos);
}
<input type="text" class="productPrice">
<br>
<br><input type="text" class="productPrice">
<br>
<br><input type="text" class="productPrice">
<br>
<br><input type="text" class="productPrice">
<br>
<br>

highlighting each email in input tag

So, what I am going to do with the input tag is to insert as many as email address inside it.
<input type="text" name="email-tags"/>
To make it more user-friendly, I want to highlight each-email which is typed inside it with blue color, it looks similar like a tag in SO question which also has x button to delete the tag.
Can anybody please help me how to do this with javascript?
Thanks in advance.

This block of code actually does what you need. It's pretty advanced. I hope it suits your needs. document.getElementById("test").value contains the email addresses in an array in this example.
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" />

how about this:
<from id="form" action="">
<span id="emailInput">
<input type="text" name="email-tags"/>
</span>
<span id="test"></span>
</form>
function isValidEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
$(function(){
$('input').keydown(function(event){
$input = $(this);
$emailInput = $("#emailInput");
$("#test").html(event.which);
switch(event.which){
//stop for "," ";" and " "
case 188:
case 186:
case 32:
currentEmail = $.trim($input.val());
if(isValidEmail(currentEmail)){
$address = $("<span>");
$address.addClass("emailAddress");
$address.text(currentEmail);
$close=$('<span>');
$close.addClass("close").text("x");
$address.append($close);
$input.val("");
$input.before($address);
}
}
});
$("#emailInput").on("click",".close",function(){
$(this).parent().remove();
});
});
see here:
http://fiddle.jshell.net/wryjde3z/