Добавьте функцию "закрыть" и цвета для начальной загрузки тегов
У меня есть базовая форма электронной почты, и я хочу превратить поле электронной почты в поле ввода тегов, чтобы использовать несколько адресов электронной почты более современным способом. После долгих поисков я решил попробовать ввести теги Bootsrap и наткнулся на полезную статью Stackru. Как использовать плагин Bootstrap Tags Input. Я попытался реализовать это. Он отлично работает, за исключением 2 отсутствующих элементов: 1- мне нужен способ легко удалить теги (например, маленький крестик) 2- в идеале я хотел, чтобы теги были подсвечены / окрашены каким-либо образом. Вот код для моей формы, включая CSS и JS для функции тегов:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script>
<style type="text/css">
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: block;
padding: 4px 6px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0 6px;
margin: 0;
width: auto;
max-width: inherit;
}
body {
font-weight: bold;
}
.container1 {
background-color: #f1f2f4;
padding: 0 0 10px 0;
margin: 0;
color: #545454;
}
.googleGreen {
background-color: #3cba54;
border: #3cba54;
}
.googleGray {
background-color: #C2CECE;
border: #C2CECE;
}
.header {
background-color: #4885ed;
color: white;
font-weight: bold;
padding: 20px;
text-align: center;
font-size: 1.2em;
margin-bottom: 15px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="container1">
<div class="header" id="emailHeader">
<?=mailHeader?>
</div>
<div class="container">
<form>
<div class="formGroupContainer green">
<div class="form-group">
<label for="toAddress"><i class="fa fa-envelope" aria-hidden="true"></i> To: Email address</label>
<input type="email" data-role="tagsinput" multiple="multiple" name="toAddress" class="form-control" id="tags" aria-describedby="emailHelp" value=<?=toEmail?>>
</div>
<div class="form-group">
<label for="ccAddress"><i class="fa fa-envelope" aria-hidden="true"></i> Cc: Email address</label>
<input type="email" multiple="multiple" name="ccAddress" class="form-control" id="ccAddress" aria-describedby="emailHelp" value=<?=ccEmail?>>
</div>
<div class="form-group">
<label for="subject"><i class="fa fa-info-circle" aria-hidden="true"></i> Subject</label>
<input type="input" name="subject" class="form-control" id="subject" value=<?=mailSubject?>>
</div>
<div class="form-group">
<label for="subject"><i class="fa fa-pencil" aria-hidden="true"></i> Message</label>
<div id="blankInput"></div>
<textarea class="form-control" rows="12" id="text" name="message">Dear <?= firstName ?> <?= surName ?>,
<?= mailBody ?>
Kind regards,
<?= contractorName ?>,
<?= contractorTitle ?></textarea>
</div>
<div class="form-group" id="pdfForm">
<!-- <label for="pdfUrl"><a href=<?=pdfUrl?> target="_blank" name="pdfUrl" id="pdfUrl">PDF Attachment</a></label> -->
<label for="pdfUrl"><i class="fa fa-paperclip" aria-hidden="true"></i> PDF Attachment</label>
<input type="url" name="pdfUrl" class="form-control" id="pdfUrl" value=<?=pdfUrl?>>
</div>
</div>
<button type="submit" class="btn btn-primary googleGreen" id="load" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Sending">Send Email</button>
<button type="button" class="btn btn-primary googleGray" onClick="google.script.host.close()">Cancel</button>
</form>
</div>
</div>
<script>
window.onload = function() {
document.getElementsByTagName('form')[0]
.addEventListener('submit', function(e) {
e.preventDefault();
google.script.run
.withSuccessHandler(function(result) {
google.script.host.close()
})
.withFailureHandler(function(result) {
console.log("f %s", result)
})
//.withFailureHandler(function(result){toastr.error('Process failed', result)})
.sendMail(e.currentTarget);
});
}
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 15000);
});
</script>
</body>
</html>