From 40f1270453e8f2a745fdc43845d0f654cac0b1fe Mon Sep 17 00:00:00 2001 From: Adrienne Stilp Date: Mon, 11 Mar 2024 15:57:46 -0700 Subject: [PATCH 1/3] Add javascript to check length of pasted text In form input fields with the maxlength attribute, add custom javascript that prevents pasting text with more than maxlength characters. This can help prevent data truncation when pasting more characters than maxlength allows, since by default they would be silently truncated. --- primed/static/js/project.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/primed/static/js/project.js b/primed/static/js/project.js index d26d23b9..b9f177b5 100644 --- a/primed/static/js/project.js +++ b/primed/static/js/project.js @@ -1 +1,15 @@ /* Project specific Javascript goes here. */ + +// Handle paste event for text inputs with maxlength. +const checkPasteLength = (e) => { + var paste = (event.clipboardData || window.clipboardData).getData("text"); + maxlength = e.target.getAttribute("maxlength"); + if (maxlength <= paste.length) { + alert("String longer than allowed maximum length of " + maxlength + " characters:\n" + paste) + e.preventDefault() + e.stopPropagation() + } +} + +var textInputs = $('form').find("input[maxlength]") +textInputs.on("paste", checkPasteLength); From 6337e925b1923b535d71c34ada590ae702b44e81 Mon Sep 17 00:00:00 2001 From: Adrienne Stilp Date: Fri, 22 Mar 2024 13:32:38 -0700 Subject: [PATCH 2/3] Fix length check so you can paste strings equal to max length --- primed/static/js/project.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/primed/static/js/project.js b/primed/static/js/project.js index b9f177b5..62e8fcab 100644 --- a/primed/static/js/project.js +++ b/primed/static/js/project.js @@ -4,7 +4,7 @@ const checkPasteLength = (e) => { var paste = (event.clipboardData || window.clipboardData).getData("text"); maxlength = e.target.getAttribute("maxlength"); - if (maxlength <= paste.length) { + if (paste.length > maxlength) { alert("String longer than allowed maximum length of " + maxlength + " characters:\n" + paste) e.preventDefault() e.stopPropagation() From d5a72c2a38b08cbdfe7dd75668ddf35647a9f129 Mon Sep 17 00:00:00 2001 From: Adrienne Stilp Date: Fri, 22 Mar 2024 13:32:58 -0700 Subject: [PATCH 3/3] Use event listeners instead of deprecated event --- primed/static/js/project.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/primed/static/js/project.js b/primed/static/js/project.js index 62e8fcab..9c90629e 100644 --- a/primed/static/js/project.js +++ b/primed/static/js/project.js @@ -2,7 +2,7 @@ // Handle paste event for text inputs with maxlength. const checkPasteLength = (e) => { - var paste = (event.clipboardData || window.clipboardData).getData("text"); + var paste = (e.clipboardData || window.clipboardData).getData("text"); maxlength = e.target.getAttribute("maxlength"); if (paste.length > maxlength) { alert("String longer than allowed maximum length of " + maxlength + " characters:\n" + paste) @@ -12,4 +12,8 @@ const checkPasteLength = (e) => { } var textInputs = $('form').find("input[maxlength]") -textInputs.on("paste", checkPasteLength); +// textInputs.on("paste", checkPasteLength); +for(var i = 0; i < textInputs.length; i++){ + // Console: print the clicked

element + textInputs[i].addEventListener("paste", checkPasteLength); +}