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 = `
<div class="item content"><p class="ttle">Message content</p></div>
<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 class="item author rows2"><p class="ttle">Author</p></div>
<div class="edit">
@ -184,19 +184,23 @@ window.onload = () => {
<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>
</circle>
</svg>
</svg>
</svg>
<p></p>
</div>
</label>
</form>
</div>
</div>
</div>
<div class="item title inlineField">
<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 class="item description"><p class="ttle">Description</p></div>
<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 class="item fields"><p class="ttle">Fields</p></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"/>
</div>
<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>
<form method="post" enctype="multipart/form-data">
@ -306,6 +310,8 @@ window.onload = () => {
<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>
</circle>
</svg>
</svg>
</svg>
<p></p>
</div>
@ -352,10 +358,10 @@ window.onload = () => {
<div class="fieldNumber"></div>
<div class="fieldInner">
<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 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 class="inlineCheck">
@ -423,6 +429,7 @@ window.onload = () => {
document.querySelector('.addField').addEventListener('click', () => {
!json.embed && (json.embed = {});
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 });
json.embed.fields = arr;
update(json);