Add field length check and maxlength to inputs and textareas

This commit is contained in:
Lorem Ipsum 2021-01-21 15:38:11 +00:00
parent 45a90cca56
commit cf3416de1b

View file

@ -150,7 +150,7 @@ window.onload = () => {
gui.innerHTML = ` gui.innerHTML = `
<div class="item content"><p class="ttle">Message content</p></div> <div class="item content"><p class="ttle">Message content</p></div>
<div class="edit"> <div class="edit">
<textarea class="editContent" placeholder="Message content" autocomplete="off">${encodeHTML(object.content || '')}</textarea> <textarea class="editContent" placeholder="Message content" maxlength="2000" autocomplete="off">${encodeHTML(object.content || '')}</textarea>
</div> </div>
<div class="item author rows2"><p class="ttle">Author</p></div> <div class="item author rows2"><p class="ttle">Author</p></div>
<div class="edit"> <div class="edit">
@ -184,19 +184,23 @@ window.onload = () => {
<circle fill="#fff" stroke="none" cx="54" cy="50" r="6"> <circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
<animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform> <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
</circle> </circle>
</svg>
</svg>
</svg> </svg>
<p></p> <p></p>
</div> </div>
</label> </label>
</form> </form>
</div>
</div>
</div> </div>
<div class="item title inlineField"> <div class="item title inlineField">
<p class="ttle">Title</p> <p class="ttle">Title</p>
<input class="editTitle" type="text" placeholder="Title" autocomplete="off" value="${encodeHTML(object.embed?.title || '')}"> <input class="editTitle" type="text" placeholder="Title" autocomplete="off" maxlength="256" value="${encodeHTML(object.embed?.title || '')}">
</div> </div>
<div class="item description"><p class="ttle">Description</p></div> <div class="item description"><p class="ttle">Description</p></div>
<div class="edit"> <div class="edit">
<textarea class="editDescription" placeholder="Embed description" autocomplete="off">${encodeHTML(object.embed?.description || '')}</textarea> <textarea class="editDescription" placeholder="Embed description" maxlength="2048" autocomplete="off">${encodeHTML(object.embed?.description || '')}</textarea>
</div> </div>
<div class="item fields"><p class="ttle">Fields</p></div> <div class="item fields"><p class="ttle">Fields</p></div>
<div class="edit"></div> <div class="edit"></div>
@ -282,7 +286,7 @@ window.onload = () => {
<input class="editFooterLink" type="text" value="${encodeHTML(object.embed?.footer?.icon_url || '')}" placeholder="Icon URL" autocomplete="off"/> <input class="editFooterLink" type="text" value="${encodeHTML(object.embed?.footer?.icon_url || '')}" placeholder="Icon URL" autocomplete="off"/>
</div> </div>
<div class="editName"> <div class="editName">
<input class="editFooterText" type="text" value="${encodeHTML(object.embed?.footer?.text || '')}" placeholder="Footer text" autocomplete="off" /> <input class="editFooterText" type="text" maxlength="2048" value="${encodeHTML(object.embed?.footer?.text || '')}" placeholder="Footer text" autocomplete="off" />
</div> </div>
</div> </div>
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
@ -306,6 +310,8 @@ window.onload = () => {
<circle fill="#fff" stroke="none" cx="54" cy="50" r="6"> <circle fill="#fff" stroke="none" cx="54" cy="50" r="6">
<animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform> <animateTransform attributeName="transform" dur="1s" type="translate" values="0 5 ; 0 -5; 0 5" repeatCount="indefinite" begin="0.3"></animateTransform>
</circle> </circle>
</svg>
</svg>
</svg> </svg>
<p></p> <p></p>
</div> </div>
@ -352,10 +358,10 @@ window.onload = () => {
<div class="fieldNumber"></div> <div class="fieldNumber"></div>
<div class="fieldInner"> <div class="fieldInner">
<div class="designerFieldName"> <div class="designerFieldName">
<input type="text" placeholder="Field name" autocomplete="off" value="${encodeHTML(f.name)}"> <input type="text" placeholder="Field name" autocomplete="off" maxlength="256" value="${encodeHTML(f.name)}">
</div> </div>
<div class="designerFieldValue"> <div class="designerFieldValue">
<textarea placeholder="Field value" autocomplete="off">${encodeHTML(f.value)}</textarea> <textarea placeholder="Field value" autocomplete="off" maxlength="1024">${encodeHTML(f.value)}</textarea>
</div> </div>
</div> </div>
<div class="inlineCheck"> <div class="inlineCheck">
@ -423,6 +429,7 @@ window.onload = () => {
document.querySelector('.addField').addEventListener('click', () => { document.querySelector('.addField').addEventListener('click', () => {
!json.embed && (json.embed = {}); !json.embed && (json.embed = {});
let arr = json.embed.fields || []; let arr = json.embed.fields || [];
if (arr.length >= 25) return error('Cannot have more than 25 fields', 5000);
arr.push({ name: "Field name", value: "Field value", inline: false }); arr.push({ name: "Field name", value: "Field value", inline: false });
json.embed.fields = arr; json.embed.fields = arr;
update(json); update(json);