显示带有字符串字符和输入的输出？
Display output with a string character and with an input?
我有两件事与向输出视图添加字符有关。
- 代词 - 现在，它是隐藏的，直到有人输入他们喜欢的代词。如果他们输入的是 her/she ，它会输出，但我想做 '(' + "her/she" + ')';
2.The 输出是隐藏的，直到有人输入数字。我想把它显示为 M: 739.383.3893.
我可以让输出显示输入文本，但不能显示字符。如何根据用户输入的内容将字符添加到输出中？
这里是新手，很抱歉:(
(function() {
/*
* Input stuff
*/
var doc = document;
var form = doc.getElementById('form');
var copyButton = doc.getElementById('copy');
var resetButton = doc.getElementById('reset');
var inputPhone = doc.getElementById('phone');
var inputOffice = doc.getElementById('office');
var instructions = doc.getElementById('instructions');
var inputFullName = doc.getElementById('fullName');
var inputPronouns = doc.getElementById('pronouns');
var inputJobTitle = doc.getElementById('jobTitle');
var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
var peopleTemplate = {
empty: {
fullName: "",
pronouns: "",
jobTitle: "",
phone: "",
office: ""
},
dummy: {
fullName: "Your Name",
jobTitle: "Your title",
pronouns: "Your pronouns",
office: "7890",
phone: "123-456-7890"
}
};
/*
* Output stuff
*/
var sig = doc.getElementById('sig');
var sigPhone = doc.querySelector('.sig__phone');
var sigFullName = doc.querySelector('.sig__fullName');
var sigJobTitle = doc.querySelector('.sig__jobTitle');
var sigPronouns = doc.querySelector('.sig__pronouns');
var sigOffice = doc.querySelector('.sig__office');
/*
* Instructions HTML
*/
var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>"
+ "<p>To create a new signature in Outlook, follow these directions:</p>"
+ "<ol><li>Update Outlook to the latest version.</li>"
+ "<li>Open Outlook.</li>"
+ "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>"
+ "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>"
+ "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>"
+ "<li>Select whatever is there already and paste your new signature into the box.</li>"
+ "</ol>";
/*
* Clear form inputs
*/
var resetForm = function () {
inputFullName.value = '';
inputJobTitle.value = '';
inputPhone.value = '';
inputPronouns.value = '';
inputOffice.value = '';
updateSignature();
instructions.innerHTML = '';
};
/*
* Fill signature with dummy info
*/
var fillDummySignature = function () {
sigFullName.textContent = "Your Name";
sigPronouns.textContent = ""
sigJobTitle.textContent = "Your title";
sigPhone.textContent = "";
sigOffice.textContent = "1234";
};
/*
* Check if nothing is entered
*/
var inputsAreEmpty = function () {
return inputFullName.value === ''
&& inputPronouns.value === ''
&& inputJobTitle.value === ''
&& inputPhone.value === ''
&& inputOffice.value === '';
};
var userName = document.querySelector('#phone');
userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {
var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
this.value = newValue;
}
/*
* Reformat phone number syntax
*/
var formatPhone = function (n) {
// var pattern = /[^0-9.]+/g;
// if (n.search(pattern) !== -1) {
// console.log("not a number");
// // n.replace(pattern, '');
// return n;
// }
var o = n;
var l = n.length;
var noDash = function (value, index) {
return value.charAt(index) !== '.';
};
var insertDash = function (value, index) {
return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
};
var no3 = noDash(o, 3);
var no7 = noDash(o, 7);
if (l > 3 && l <= 7) {
if (no3) {
o = insertDash(n, 3);
}
} else if (l > 7 && l <= 11) {
if (no3) {
o = insertDash(n, 3);
if (no7) {
o = insertDash(o, 7); // insert on the value we just updated
}
} else if (no7) {
o = insertDash(n, 7);
}
} else if (l > 12) {
o = n.slice(0, 12);
}
return o;
};
/*
* Add the input values into the actual signature
*/
var updateSignature = function (event) {
if (inputsAreEmpty()) {
fillDummySignature();
// Button states
copyButton.disabled = true;
copyButton.innerHTML = copyButtonDisabledHTML;
resetButton.style.display = 'none';
} else {
// Button states
copyButton.disabled = false;
copyButton.innerHTML = copyButtonOriginalHTML;
resetButton.style.display = 'inline-block';
// Populate signature fields
if (event && event.target.tagName === 'INPUT') {
var id = event.target.id;
var input = doc.getElementById(id);
var sigClassName = '.sig__' + id;
var inputIdName = '#' + id;
var sigTarget = doc.querySelector(sigClassName);
var inputTarget = doc.querySelector(inputIdName);
if (id === 'fullName') {
sigTarget.textContent = input.value;
} else if (id === 'phone') {
sigTarget.textContent = formatPhone(input.value);
inputTarget.value = formatPhone(input.value);
} else {
sigTarget.textContent = input.value;
}
} else {
sigFullName.textContent = inputFullName.value;
sigJobTitle.textContent = inputJobTitle.value;
sigPhone.textContent = inputPhone.value;
}
}
}
/*
* Insert a person's info when option is selected
*/
var insertPersonInfo = function (event) {
resetForm();
if (event.target.value !== 'custom') {
var person = people[this.selectedIndex - 1];
inputFullName.value = person.fullName;
inputPronouns.value = person.pronouns;
inputJobTitle.value = person.jobTitle;
inputPhone.value = person.phone;
updateSignature(event);
}
};
/*
* Populate the people info in the select menu on load
*/
document.addEventListener("DOMContentLoaded", function (event) {
updateSignature(event);
fillDummySignature();
});
/*
* Copy raw HTML output
*/
copyButton.addEventListener('click', function(event) {
// Have to remove any existing ranges :: Chrome bug
window.getSelection().removeAllRanges();
// Create range and add it to selection
var r = document.createRange();
r.selectNode(sig);
window.getSelection().addRange(r);
// Error catching
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove range from selection again
window.getSelection().removeAllRanges();
if (successful) {
instructions.innerHTML = pasteInstructions;
// this.parentNode.removeChild(this);
}
});
/*
* Listeners
*/
form.addEventListener('input', updateSignature);
resetButton.addEventListener('click', resetForm);
inputPhone.addEventListener('paste', function(event) {
// formatPhone();
});
}());
.form__input, .button, .button--copy, .button--reset {
font-size: 14px;
margin: 0;
padding: 6px 9px;
border: 1px solid #e7e7e7;
border-radius: 2px;
line-height: 1;
}
* {
box-sizing: border-box;
}
.sig-gen {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
margin: 2em auto 4em;
width: 100%;
max-width: 800px;
}
.sig-gen__section {
margin-bottom: 2em;
}
.sig-gen__section--email {
margin-bottom: 3em;
}
.sig__field, .set-inform, .links-text {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.set-inform {
display: inline-block;
}
@media screen and (min-width: 600px) {
.form {
/* flex-direction: row; */
}
}
.form__group {
margin-bottom: 12px;
}
.form__group:last-of-type {
margin-bottom: 0;
}
@media screen and (min-width: 600px) {
.form__group {
margin-bottom: 10px;
}
}
.form label {
display: block;
margin-bottom: 6px;
}
.form__input {
background: white;
width: 100%;
}
.form__input:focus, .form__input:active {
outline: 0;
border-color: #bebebe;
}
.email_generator {
position: relative;
border: 1px solid #e7e7e7;
border-top: none;
border-bottom: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: calc(100% + 2 * 1px);
height: 28%;
background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
padding: 28px;
}
.email__sig {
margin-top: 51px;
}
.email__line {
height: 12px;
margin-bottom: 12px;
background: #e7e7e7;
border-radius: 1px;
}
.email__line:last-child {
width: 66%;
margin-bottom: 28px;
}
.email__signoff .email__line {
width: 17%;
}
.sig__field {
font-size: 14px;
}
.sig__fullName {
font-size: 18px;
}
.button, .button--copy, .button--reset {
padding: 9px 12px;
color: white;
cursor: pointer;
background: #8c4049;
border-color: #823b44;
}
.button:hover, .button--copy:hover, .button--reset:hover {
background: #97454e;
border-color: #8c4049;
}
.button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active {
outline: 0;
background: #77363e;
border-color: #622d33;
}
.button:disabled, .button--copy:disabled, .button--reset:disabled {
background: #656669;
border-color: #5d5e61;
cursor: not-allowed;
color: white;
}
.button--reset {
background: #e2e3e4;
border-color: #dadbdd;
color: #656669;
}
.button--reset:hover {
background: #eaebeb;
border-color: #e2e3e4;
}
.button--reset:focus, .button--reset:active {
outline: 0;
background: #d2d4d5;
border-color: #c2c4c6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
<section class="sig-gen__section">
<h2>Email Signature Generator</h2>
</section>
<section class="sig-gen__section">
<form id="form" class="form">
<div class="form__group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
</div>
<div class="form__group">
<label for="pronouns">Pronouns:</label>
<input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
</div>
<div class="form__group">
<label for="jobTitle">Job Title:</label>
<input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
</div>
<div class="form__group">
<label for="office">Office Extension:</label>
<input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
</div>
<div class="form__group">
<label for="phone">Mobile:</label>
<input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
</div>
</form>
</section>
<section class="sig-gen__section sig-gen__section--email">
<div class="email_generator">
<div class="email__container">
<div id="sig" class="email__sig">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
<div>
<strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong><div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
</div>
<div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
<div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div><div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span><div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
<a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a><span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="sig-gen__section">
<button id="copy" class="button--copy"></button>
<button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
</section>
<section class="sig-gen__section">
<div id="instructions"></div>
</section>
</div>
[x] (pronoun) 显示完成，
[x] 在显示的手机号码前添加 M. 完成，
(function() {
/*
* Input stuff
*/
var doc = document;
var form = doc.getElementById('form');
var copyButton = doc.getElementById('copy');
var resetButton = doc.getElementById('reset');
var inputPhone = doc.getElementById('phone');
var inputOffice = doc.getElementById('office');
var instructions = doc.getElementById('instructions');
var inputFullName = doc.getElementById('fullName');
var inputPronouns = doc.getElementById('pronouns');
var inputJobTitle = doc.getElementById('jobTitle');
var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
var peopleTemplate = {
empty: {
fullName: "",
pronouns: "",
jobTitle: "",
phone: "",
office: ""
},
dummy: {
fullName: "Your Name",
jobTitle: "Your title",
pronouns: "Your pronouns",
office: "7890",
phone: "123-456-7890"
}
};
/*
* Output stuff
*/
var sig = doc.getElementById('sig');
var sigPhone = doc.querySelector('.sig__phone');
var sigFullName = doc.querySelector('.sig__fullName');
var sigJobTitle = doc.querySelector('.sig__jobTitle');
var sigPronouns = doc.querySelector('.sig__pronouns');
var sigOffice = doc.querySelector('.sig__office');
/*
* Instructions HTML
*/
var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" +
"<p>To create a new signature in Outlook, follow these directions:</p>" +
"<ol><li>Update Outlook to the latest version.</li>" +
"<li>Open Outlook.</li>" +
"<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" +
"<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" +
"<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" +
"<li>Select whatever is there already and paste your new signature into the box.</li>" +
"</ol>";
/*
* Clear form inputs
*/
var resetForm = function() {
inputFullName.value = '';
inputJobTitle.value = '';
inputPhone.value = '';
inputPronouns.value = '';
inputOffice.value = '';
updateSignature();
instructions.innerHTML = '';
};
/*
* Fill signature with dummy info
*/
var fillDummySignature = function() {
sigFullName.textContent = "Your Name";
sigPronouns.textContent = ""
sigJobTitle.textContent = "Your title";
sigPhone.textContent = "";
sigOffice.textContent = "1234";
};
/*
* Check if nothing is entered
*/
var inputsAreEmpty = function() {
return [inputFullName, inputPronouns, inputJobTitle, inputPhone, inputOffice].every(({
value
}) => value === '')
};
var userName = document.querySelector('#phone');
userName.addEventListener('input', restrictNumber);
function restrictNumber(e) {
var newValue = this.value.replace(new RegExp(/[^\d]/, 'ig'), "");
this.value = newValue;
}
/*
* Reformat phone number syntax
*/
var formatPhone = function(n) {
// var pattern = /[^0-9.]+/g;
// if (n.search(pattern) !== -1) {
// console.log("not a number");
// // n.replace(pattern, '');
// return n;
// }
var o = n;
var l = n.length;
var noDash = function(value, index) {
return value.charAt(index) !== '.';
};
var insertDash = function(value, index) {
return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
};
var no3 = noDash(o, 3);
var no7 = noDash(o, 7);
if (l > 3 && l <= 7) {
if (no3) {
o = insertDash(n, 3);
}
} else if (l > 7 && l <= 11) {
if (no3) {
o = insertDash(n, 3);
if (no7) {
o = insertDash(o, 7); // insert on the value we just updated
}
} else if (no7) {
o = insertDash(n, 7);
}
} else if (l > 12) {
o = n.slice(0, 12);
}
return o;
};
/*
* Add the input values into the actual signature
*/
var updateSignature = function(event) {
if (inputsAreEmpty()) {
fillDummySignature();
// Button states
copyButton.disabled = true;
copyButton.innerHTML = copyButtonDisabledHTML;
resetButton.style.display = 'none';
} else {
// Button states
copyButton.disabled = false;
copyButton.innerHTML = copyButtonOriginalHTML;
resetButton.style.display = 'inline-block';
// Populate signature fields
if (event && event.target.tagName === 'INPUT') {
var id = event.target.id;
var input = doc.getElementById(id);
var sigClassName = '.sig__' + id;
var inputIdName = '#' + id;
var sigTarget = doc.querySelector(sigClassName);
var inputTarget = doc.querySelector(inputIdName);
if (id === 'fullName') {
sigTarget.textContent = input.value;
} else if (id === 'phone') {
// just save the value in a variable, and use that
const formattedPhone = formatPhone(input.value);
sigTarget.textContent = `M. ${formattedPhone}`;
inputTarget.value = formattedPhone
} else if (id === 'pronouns') {
// this case needed to be treated separately
sigTarget.textContent = `(${input.value})`
} else {
sigTarget.textContent = input.value;
}
} else {
sigFullName.textContent = inputFullName.value;
sigJobTitle.textContent = inputJobTitle.value;
sigPhone.textContent = inputPhone.value;
}
}
}
/*
* Insert a person's info when option is selected
*/
var insertPersonInfo = function(event) {
resetForm();
if (event.target.value !== 'custom') {
var person = people[this.selectedIndex - 1];
inputFullName.value = person.fullName;
inputPronouns.value = person.pronouns;
inputJobTitle.value = person.jobTitle;
inputPhone.value = person.phone;
updateSignature(event);
}
};
/*
* Populate the people info in the select menu on load
*/
document.addEventListener("DOMContentLoaded", function(event) {
updateSignature(event);
fillDummySignature();
});
/*
* Copy raw HTML output
*/
copyButton.addEventListener('click', function(event) {
// Have to remove any existing ranges :: Chrome bug
window.getSelection().removeAllRanges();
// Create range and add it to selection
var r = document.createRange();
r.selectNode(sig);
window.getSelection().addRange(r);
// Error catching
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
// Remove range from selection again
window.getSelection().removeAllRanges();
if (successful) {
instructions.innerHTML = pasteInstructions;
// this.parentNode.removeChild(this);
}
});
/*
* Listeners
*/
form.addEventListener('input', updateSignature);
resetButton.addEventListener('click', resetForm);
inputPhone.addEventListener('paste', function(event) {
// formatPhone();
});
}());
.form__input,
.button,
.button--copy,
.button--reset {
font-size: 14px;
margin: 0;
padding: 6px 9px;
border: 1px solid #e7e7e7;
border-radius: 2px;
line-height: 1;
}
* {
box-sizing: border-box;
}
.sig-gen {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
margin: 2em auto 4em;
width: 100%;
max-width: 800px;
}
.sig-gen__section {
margin-bottom: 2em;
}
.sig-gen__section--email {
margin-bottom: 3em;
}
.sig__field,
.set-inform,
.links-text {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.set-inform {
display: inline-block;
}
@media screen and (min-width: 600px) {
.form {
/* flex-direction: row; */
}
}
.form__group {
margin-bottom: 12px;
}
.form__group:last-of-type {
margin-bottom: 0;
}
@media screen and (min-width: 600px) {
.form__group {
margin-bottom: 10px;
}
}
.form label {
display: block;
margin-bottom: 6px;
}
.form__input {
background: white;
width: 100%;
}
.form__input:focus,
.form__input:active {
outline: 0;
border-color: #bebebe;
}
.email_generator {
position: relative;
border: 1px solid #e7e7e7;
border-top: none;
border-bottom: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: calc(100% + 2 * 1px);
height: 28%;
background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
padding: 28px;
}
.email__sig {
margin-top: 51px;
}
.email__line {
height: 12px;
margin-bottom: 12px;
background: #e7e7e7;
border-radius: 1px;
}
.email__line:last-child {
width: 66%;
margin-bottom: 28px;
}
.email__signoff .email__line {
width: 17%;
}
.sig__field {
font-size: 14px;
}
.sig__fullName {
font-size: 18px;
}
.button,
.button--copy,
.button--reset {
padding: 9px 12px;
color: white;
cursor: pointer;
background: #8c4049;
border-color: #823b44;
}
.button:hover,
.button--copy:hover,
.button--reset:hover {
background: #97454e;
border-color: #8c4049;
}
.button:focus,
.button--copy:focus,
.button--reset:focus,
.button:active,
.button--copy:active,
.button--reset:active {
outline: 0;
background: #77363e;
border-color: #622d33;
}
.button:disabled,
.button--copy:disabled,
.button--reset:disabled {
background: #656669;
border-color: #5d5e61;
cursor: not-allowed;
color: white;
}
.button--reset {
background: #e2e3e4;
border-color: #dadbdd;
color: #656669;
}
.button--reset:hover {
background: #eaebeb;
border-color: #e2e3e4;
}
.button--reset:focus,
.button--reset:active {
outline: 0;
background: #d2d4d5;
border-color: #c2c4c6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
<section class="sig-gen__section">
<h2>Email Signature Generator</h2>
</section>
<section class="sig-gen__section">
<form id="form" class="form">
<div class="form__group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
</div>
<div class="form__group">
<label for="pronouns">Pronouns:</label>
<input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
</div>
<div class="form__group">
<label for="jobTitle">Job Title:</label>
<input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
</div>
<div class="form__group">
<label for="office">Office Extension:</label>
<input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
</div>
<div class="form__group">
<label for="phone">Mobile:</label>
<input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
</div>
</form>
</section>
<section class="sig-gen__section sig-gen__section--email">
<div class="email_generator">
<div class="email__container">
<div id="sig" class="email__sig">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
<div>
<strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong>
<div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
</div>
<div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
<div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div>
<div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span>
<div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
<a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a>
<span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="sig-gen__section">
<button id="copy" class="button--copy"></button>
<button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
</section>
<section class="sig-gen__section">
<div id="instructions"></div>
</section>
</div>
我有两件事与向输出视图添加字符有关。
- 代词 - 现在，它是隐藏的，直到有人输入他们喜欢的代词。如果他们输入的是 her/she ，它会输出，但我想做 '(' + "her/she" + ')';
2.The 输出是隐藏的，直到有人输入数字。我想把它显示为 M: 739.383.3893.
我可以让输出显示输入文本，但不能显示字符。如何根据用户输入的内容将字符添加到输出中？
这里是新手，很抱歉:(
(function() {
/*
* Input stuff
*/
var doc = document;
var form = doc.getElementById('form');
var copyButton = doc.getElementById('copy');
var resetButton = doc.getElementById('reset');
var inputPhone = doc.getElementById('phone');
var inputOffice = doc.getElementById('office');
var instructions = doc.getElementById('instructions');
var inputFullName = doc.getElementById('fullName');
var inputPronouns = doc.getElementById('pronouns');
var inputJobTitle = doc.getElementById('jobTitle');
var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
var peopleTemplate = {
empty: {
fullName: "",
pronouns: "",
jobTitle: "",
phone: "",
office: ""
},
dummy: {
fullName: "Your Name",
jobTitle: "Your title",
pronouns: "Your pronouns",
office: "7890",
phone: "123-456-7890"
}
};
/*
* Output stuff
*/
var sig = doc.getElementById('sig');
var sigPhone = doc.querySelector('.sig__phone');
var sigFullName = doc.querySelector('.sig__fullName');
var sigJobTitle = doc.querySelector('.sig__jobTitle');
var sigPronouns = doc.querySelector('.sig__pronouns');
var sigOffice = doc.querySelector('.sig__office');
/*
* Instructions HTML
*/
var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>"
+ "<p>To create a new signature in Outlook, follow these directions:</p>"
+ "<ol><li>Update Outlook to the latest version.</li>"
+ "<li>Open Outlook.</li>"
+ "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>"
+ "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>"
+ "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>"
+ "<li>Select whatever is there already and paste your new signature into the box.</li>"
+ "</ol>";
/*
* Clear form inputs
*/
var resetForm = function () {
inputFullName.value = '';
inputJobTitle.value = '';
inputPhone.value = '';
inputPronouns.value = '';
inputOffice.value = '';
updateSignature();
instructions.innerHTML = '';
};
/*
* Fill signature with dummy info
*/
var fillDummySignature = function () {
sigFullName.textContent = "Your Name";
sigPronouns.textContent = ""
sigJobTitle.textContent = "Your title";
sigPhone.textContent = "";
sigOffice.textContent = "1234";
};
/*
* Check if nothing is entered
*/
var inputsAreEmpty = function () {
return inputFullName.value === ''
&& inputPronouns.value === ''
&& inputJobTitle.value === ''
&& inputPhone.value === ''
&& inputOffice.value === '';
};
var userName = document.querySelector('#phone');
userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {
var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
this.value = newValue;
}
/*
* Reformat phone number syntax
*/
var formatPhone = function (n) {
// var pattern = /[^0-9.]+/g;
// if (n.search(pattern) !== -1) {
// console.log("not a number");
// // n.replace(pattern, '');
// return n;
// }
var o = n;
var l = n.length;
var noDash = function (value, index) {
return value.charAt(index) !== '.';
};
var insertDash = function (value, index) {
return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
};
var no3 = noDash(o, 3);
var no7 = noDash(o, 7);
if (l > 3 && l <= 7) {
if (no3) {
o = insertDash(n, 3);
}
} else if (l > 7 && l <= 11) {
if (no3) {
o = insertDash(n, 3);
if (no7) {
o = insertDash(o, 7); // insert on the value we just updated
}
} else if (no7) {
o = insertDash(n, 7);
}
} else if (l > 12) {
o = n.slice(0, 12);
}
return o;
};
/*
* Add the input values into the actual signature
*/
var updateSignature = function (event) {
if (inputsAreEmpty()) {
fillDummySignature();
// Button states
copyButton.disabled = true;
copyButton.innerHTML = copyButtonDisabledHTML;
resetButton.style.display = 'none';
} else {
// Button states
copyButton.disabled = false;
copyButton.innerHTML = copyButtonOriginalHTML;
resetButton.style.display = 'inline-block';
// Populate signature fields
if (event && event.target.tagName === 'INPUT') {
var id = event.target.id;
var input = doc.getElementById(id);
var sigClassName = '.sig__' + id;
var inputIdName = '#' + id;
var sigTarget = doc.querySelector(sigClassName);
var inputTarget = doc.querySelector(inputIdName);
if (id === 'fullName') {
sigTarget.textContent = input.value;
} else if (id === 'phone') {
sigTarget.textContent = formatPhone(input.value);
inputTarget.value = formatPhone(input.value);
} else {
sigTarget.textContent = input.value;
}
} else {
sigFullName.textContent = inputFullName.value;
sigJobTitle.textContent = inputJobTitle.value;
sigPhone.textContent = inputPhone.value;
}
}
}
/*
* Insert a person's info when option is selected
*/
var insertPersonInfo = function (event) {
resetForm();
if (event.target.value !== 'custom') {
var person = people[this.selectedIndex - 1];
inputFullName.value = person.fullName;
inputPronouns.value = person.pronouns;
inputJobTitle.value = person.jobTitle;
inputPhone.value = person.phone;
updateSignature(event);
}
};
/*
* Populate the people info in the select menu on load
*/
document.addEventListener("DOMContentLoaded", function (event) {
updateSignature(event);
fillDummySignature();
});
/*
* Copy raw HTML output
*/
copyButton.addEventListener('click', function(event) {
// Have to remove any existing ranges :: Chrome bug
window.getSelection().removeAllRanges();
// Create range and add it to selection
var r = document.createRange();
r.selectNode(sig);
window.getSelection().addRange(r);
// Error catching
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch(err) {
console.log('Oops, unable to copy');
}
// Remove range from selection again
window.getSelection().removeAllRanges();
if (successful) {
instructions.innerHTML = pasteInstructions;
// this.parentNode.removeChild(this);
}
});
/*
* Listeners
*/
form.addEventListener('input', updateSignature);
resetButton.addEventListener('click', resetForm);
inputPhone.addEventListener('paste', function(event) {
// formatPhone();
});
}());
.form__input, .button, .button--copy, .button--reset {
font-size: 14px;
margin: 0;
padding: 6px 9px;
border: 1px solid #e7e7e7;
border-radius: 2px;
line-height: 1;
}
* {
box-sizing: border-box;
}
.sig-gen {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
margin: 2em auto 4em;
width: 100%;
max-width: 800px;
}
.sig-gen__section {
margin-bottom: 2em;
}
.sig-gen__section--email {
margin-bottom: 3em;
}
.sig__field, .set-inform, .links-text {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.set-inform {
display: inline-block;
}
@media screen and (min-width: 600px) {
.form {
/* flex-direction: row; */
}
}
.form__group {
margin-bottom: 12px;
}
.form__group:last-of-type {
margin-bottom: 0;
}
@media screen and (min-width: 600px) {
.form__group {
margin-bottom: 10px;
}
}
.form label {
display: block;
margin-bottom: 6px;
}
.form__input {
background: white;
width: 100%;
}
.form__input:focus, .form__input:active {
outline: 0;
border-color: #bebebe;
}
.email_generator {
position: relative;
border: 1px solid #e7e7e7;
border-top: none;
border-bottom: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: calc(100% + 2 * 1px);
height: 28%;
background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
padding: 28px;
}
.email__sig {
margin-top: 51px;
}
.email__line {
height: 12px;
margin-bottom: 12px;
background: #e7e7e7;
border-radius: 1px;
}
.email__line:last-child {
width: 66%;
margin-bottom: 28px;
}
.email__signoff .email__line {
width: 17%;
}
.sig__field {
font-size: 14px;
}
.sig__fullName {
font-size: 18px;
}
.button, .button--copy, .button--reset {
padding: 9px 12px;
color: white;
cursor: pointer;
background: #8c4049;
border-color: #823b44;
}
.button:hover, .button--copy:hover, .button--reset:hover {
background: #97454e;
border-color: #8c4049;
}
.button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active {
outline: 0;
background: #77363e;
border-color: #622d33;
}
.button:disabled, .button--copy:disabled, .button--reset:disabled {
background: #656669;
border-color: #5d5e61;
cursor: not-allowed;
color: white;
}
.button--reset {
background: #e2e3e4;
border-color: #dadbdd;
color: #656669;
}
.button--reset:hover {
background: #eaebeb;
border-color: #e2e3e4;
}
.button--reset:focus, .button--reset:active {
outline: 0;
background: #d2d4d5;
border-color: #c2c4c6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
<section class="sig-gen__section">
<h2>Email Signature Generator</h2>
</section>
<section class="sig-gen__section">
<form id="form" class="form">
<div class="form__group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
</div>
<div class="form__group">
<label for="pronouns">Pronouns:</label>
<input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
</div>
<div class="form__group">
<label for="jobTitle">Job Title:</label>
<input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
</div>
<div class="form__group">
<label for="office">Office Extension:</label>
<input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
</div>
<div class="form__group">
<label for="phone">Mobile:</label>
<input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
</div>
</form>
</section>
<section class="sig-gen__section sig-gen__section--email">
<div class="email_generator">
<div class="email__container">
<div id="sig" class="email__sig">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
<div>
<strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong><div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
</div>
<div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
<div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div><div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span><div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
<a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a><span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="sig-gen__section">
<button id="copy" class="button--copy"></button>
<button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
</section>
<section class="sig-gen__section">
<div id="instructions"></div>
</section>
</div>
[x] (pronoun) 显示完成，
[x] 在显示的手机号码前添加 M. 完成，
(function() {
/*
* Input stuff
*/
var doc = document;
var form = doc.getElementById('form');
var copyButton = doc.getElementById('copy');
var resetButton = doc.getElementById('reset');
var inputPhone = doc.getElementById('phone');
var inputOffice = doc.getElementById('office');
var instructions = doc.getElementById('instructions');
var inputFullName = doc.getElementById('fullName');
var inputPronouns = doc.getElementById('pronouns');
var inputJobTitle = doc.getElementById('jobTitle');
var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature';
var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!';
var peopleTemplate = {
empty: {
fullName: "",
pronouns: "",
jobTitle: "",
phone: "",
office: ""
},
dummy: {
fullName: "Your Name",
jobTitle: "Your title",
pronouns: "Your pronouns",
office: "7890",
phone: "123-456-7890"
}
};
/*
* Output stuff
*/
var sig = doc.getElementById('sig');
var sigPhone = doc.querySelector('.sig__phone');
var sigFullName = doc.querySelector('.sig__fullName');
var sigJobTitle = doc.querySelector('.sig__jobTitle');
var sigPronouns = doc.querySelector('.sig__pronouns');
var sigOffice = doc.querySelector('.sig__office');
/*
* Instructions HTML
*/
var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" +
"<p>To create a new signature in Outlook, follow these directions:</p>" +
"<ol><li>Update Outlook to the latest version.</li>" +
"<li>Open Outlook.</li>" +
"<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" +
"<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" +
"<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" +
"<li>Select whatever is there already and paste your new signature into the box.</li>" +
"</ol>";
/*
* Clear form inputs
*/
var resetForm = function() {
inputFullName.value = '';
inputJobTitle.value = '';
inputPhone.value = '';
inputPronouns.value = '';
inputOffice.value = '';
updateSignature();
instructions.innerHTML = '';
};
/*
* Fill signature with dummy info
*/
var fillDummySignature = function() {
sigFullName.textContent = "Your Name";
sigPronouns.textContent = ""
sigJobTitle.textContent = "Your title";
sigPhone.textContent = "";
sigOffice.textContent = "1234";
};
/*
* Check if nothing is entered
*/
var inputsAreEmpty = function() {
return [inputFullName, inputPronouns, inputJobTitle, inputPhone, inputOffice].every(({
value
}) => value === '')
};
var userName = document.querySelector('#phone');
userName.addEventListener('input', restrictNumber);
function restrictNumber(e) {
var newValue = this.value.replace(new RegExp(/[^\d]/, 'ig'), "");
this.value = newValue;
}
/*
* Reformat phone number syntax
*/
var formatPhone = function(n) {
// var pattern = /[^0-9.]+/g;
// if (n.search(pattern) !== -1) {
// console.log("not a number");
// // n.replace(pattern, '');
// return n;
// }
var o = n;
var l = n.length;
var noDash = function(value, index) {
return value.charAt(index) !== '.';
};
var insertDash = function(value, index) {
return value.slice(0, index) + '.' + value.slice(index, value.length + 1);
};
var no3 = noDash(o, 3);
var no7 = noDash(o, 7);
if (l > 3 && l <= 7) {
if (no3) {
o = insertDash(n, 3);
}
} else if (l > 7 && l <= 11) {
if (no3) {
o = insertDash(n, 3);
if (no7) {
o = insertDash(o, 7); // insert on the value we just updated
}
} else if (no7) {
o = insertDash(n, 7);
}
} else if (l > 12) {
o = n.slice(0, 12);
}
return o;
};
/*
* Add the input values into the actual signature
*/
var updateSignature = function(event) {
if (inputsAreEmpty()) {
fillDummySignature();
// Button states
copyButton.disabled = true;
copyButton.innerHTML = copyButtonDisabledHTML;
resetButton.style.display = 'none';
} else {
// Button states
copyButton.disabled = false;
copyButton.innerHTML = copyButtonOriginalHTML;
resetButton.style.display = 'inline-block';
// Populate signature fields
if (event && event.target.tagName === 'INPUT') {
var id = event.target.id;
var input = doc.getElementById(id);
var sigClassName = '.sig__' + id;
var inputIdName = '#' + id;
var sigTarget = doc.querySelector(sigClassName);
var inputTarget = doc.querySelector(inputIdName);
if (id === 'fullName') {
sigTarget.textContent = input.value;
} else if (id === 'phone') {
// just save the value in a variable, and use that
const formattedPhone = formatPhone(input.value);
sigTarget.textContent = `M. ${formattedPhone}`;
inputTarget.value = formattedPhone
} else if (id === 'pronouns') {
// this case needed to be treated separately
sigTarget.textContent = `(${input.value})`
} else {
sigTarget.textContent = input.value;
}
} else {
sigFullName.textContent = inputFullName.value;
sigJobTitle.textContent = inputJobTitle.value;
sigPhone.textContent = inputPhone.value;
}
}
}
/*
* Insert a person's info when option is selected
*/
var insertPersonInfo = function(event) {
resetForm();
if (event.target.value !== 'custom') {
var person = people[this.selectedIndex - 1];
inputFullName.value = person.fullName;
inputPronouns.value = person.pronouns;
inputJobTitle.value = person.jobTitle;
inputPhone.value = person.phone;
updateSignature(event);
}
};
/*
* Populate the people info in the select menu on load
*/
document.addEventListener("DOMContentLoaded", function(event) {
updateSignature(event);
fillDummySignature();
});
/*
* Copy raw HTML output
*/
copyButton.addEventListener('click', function(event) {
// Have to remove any existing ranges :: Chrome bug
window.getSelection().removeAllRanges();
// Create range and add it to selection
var r = document.createRange();
r.selectNode(sig);
window.getSelection().addRange(r);
// Error catching
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
// Remove range from selection again
window.getSelection().removeAllRanges();
if (successful) {
instructions.innerHTML = pasteInstructions;
// this.parentNode.removeChild(this);
}
});
/*
* Listeners
*/
form.addEventListener('input', updateSignature);
resetButton.addEventListener('click', resetForm);
inputPhone.addEventListener('paste', function(event) {
// formatPhone();
});
}());
.form__input,
.button,
.button--copy,
.button--reset {
font-size: 14px;
margin: 0;
padding: 6px 9px;
border: 1px solid #e7e7e7;
border-radius: 2px;
line-height: 1;
}
* {
box-sizing: border-box;
}
.sig-gen {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
margin: 2em auto 4em;
width: 100%;
max-width: 800px;
}
.sig-gen__section {
margin-bottom: 2em;
}
.sig-gen__section--email {
margin-bottom: 3em;
}
.sig__field,
.set-inform,
.links-text {
font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
.form {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.set-inform {
display: inline-block;
}
@media screen and (min-width: 600px) {
.form {
/* flex-direction: row; */
}
}
.form__group {
margin-bottom: 12px;
}
.form__group:last-of-type {
margin-bottom: 0;
}
@media screen and (min-width: 600px) {
.form__group {
margin-bottom: 10px;
}
}
.form label {
display: block;
margin-bottom: 6px;
}
.form__input {
background: white;
width: 100%;
}
.form__input:focus,
.form__input:active {
outline: 0;
border-color: #bebebe;
}
.email_generator {
position: relative;
border: 1px solid #e7e7e7;
border-top: none;
border-bottom: none;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 6px 0 #ccc;
}
.email_generator:before {
content: "";
position: absolute;
top: 0;
left: -1px;
width: calc(100% + 2 * 1px);
height: 28%;
background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.email__container {
padding: 28px;
}
.email__sig {
margin-top: 51px;
}
.email__line {
height: 12px;
margin-bottom: 12px;
background: #e7e7e7;
border-radius: 1px;
}
.email__line:last-child {
width: 66%;
margin-bottom: 28px;
}
.email__signoff .email__line {
width: 17%;
}
.sig__field {
font-size: 14px;
}
.sig__fullName {
font-size: 18px;
}
.button,
.button--copy,
.button--reset {
padding: 9px 12px;
color: white;
cursor: pointer;
background: #8c4049;
border-color: #823b44;
}
.button:hover,
.button--copy:hover,
.button--reset:hover {
background: #97454e;
border-color: #8c4049;
}
.button:focus,
.button--copy:focus,
.button--reset:focus,
.button:active,
.button--copy:active,
.button--reset:active {
outline: 0;
background: #77363e;
border-color: #622d33;
}
.button:disabled,
.button--copy:disabled,
.button--reset:disabled {
background: #656669;
border-color: #5d5e61;
cursor: not-allowed;
color: white;
}
.button--reset {
background: #e2e3e4;
border-color: #dadbdd;
color: #656669;
}
.button--reset:hover {
background: #eaebeb;
border-color: #e2e3e4;
}
.button--reset:focus,
.button--reset:active {
outline: 0;
background: #d2d4d5;
border-color: #c2c4c6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="app" class="sig-gen">
<section class="sig-gen__section">
<h2>Email Signature Generator</h2>
</section>
<section class="sig-gen__section">
<form id="form" class="form">
<div class="form__group">
<label for="fullName">Full Name:</label>
<input type="text" id="fullName" class="form__input" placeholder="Your name" value="">
</div>
<div class="form__group">
<label for="pronouns">Pronouns:</label>
<input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value="">
</div>
<div class="form__group">
<label for="jobTitle">Job Title:</label>
<input type="text" id="jobTitle" class="form__input" placeholder="Your title" value="">
</div>
<div class="form__group">
<label for="office">Office Extension:</label>
<input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value="">
</div>
<div class="form__group">
<label for="phone">Mobile:</label>
<input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value="">
</div>
</form>
</section>
<section class="sig-gen__section sig-gen__section--email">
<div class="email_generator">
<div class="email__container">
<div id="sig" class="email__sig">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top">
<div>
<strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong>
<div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div>
</div>
<div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div>
<div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div>
<div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span>
<div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div>
<div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;">
<tbody border="0" cellpadding="0" cellspacing="0">
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top">
<a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a>
<span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span>
</td>
</tr>
<tr border="0" cellpadding="0" cellspacing="0">
<td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="sig-gen__section">
<button id="copy" class="button--copy"></button>
<button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button>
</section>
<section class="sig-gen__section">
<div id="instructions"></div>
</section>
</div>