How do I get each e-mail address typed in input? Everything works correctly, except the design in the input
It looks like this in the post box, not html format:
<span class="emBox">hello@world.org</span>, <span class="emBox">stack@overflow.org</span>,
javascript:
var textarea = $('#emails');
textarea.on({
keyup: function(e) {
if (e.which === 188) check();
},
blur: check
});
function check() {
var val = $.trim(textarea.val()),
err = '';
if (!val.length) {
err = 'No input ?';
return;
}
var emails = val.split(','),
notvalid = [],
temp = [];
$.each(emails, function(_,mail) {
mail = $.trim(mail);
if ( mail.length ) {
var m = mail.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
if (m) {
temp.push('<span class="emBox">' + m + '</span>');
}else{
temp.push(mail);
notvalid.push(mail)
}
}else{
temp.push(mail);
}
if (notvalid.length) err = 'Not valid emails : ' + notvalid.join(', ');
});
$('#error').html(err);
textarea.val((temp.length ? temp : '' + emails + "").join(', '));
}
Example:
Well, what you are doing is just inserting plain text inside a text area.
To make these render as HTML, have a container div:
<div id="container"></div>
And insert the spans inside the div's innerHTML:
var div = document.getElementById("container");
div.innerHTML = (temp.length ? temp : '' + emails + "").join(', '));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.