Hi @Yalda Akhgar,

Firstly, your Output parameter name is IsValidPaste but in your code you written IsLonger, I couldn't see this (IsLonger ) output parameter in JS Node .

Could you please Check your code.

Kind regards,

Sanjay Kushwah 

Hey, @Yalda Akhgar 

1. you have to set the input field max length check here
2. you have to try this js this. also works for your requirements -

document.addEventListener("DOMContentLoaded", function () {

    const inputField = document.querySelector("[name='InputField']");

    const alertMessage = document.querySelector("[name='AlertMessage']");

    inputField.addEventListener("paste", handlePaste);

    inputField.addEventListener("focus", handleFocus);

    function handlePaste(event) {

        event.preventDefault();

        navigator.clipboard.readText().then(text => {

            const maxLength = inputField.maxLength;

            if (text.length > maxLength) {

                alertMessage.innerHTML = `You cannot paste more than ${maxLength} characters.`;

                alertMessage.style.display = "block";

            } else {

                inputField.value = text.substring(0, maxLength);

                alertMessage.style.display = "none";

            }

        });

    }

    function handleFocus() {

        navigator.clipboard.readText().then(text => {

            const maxLength = inputField.maxLength;

            if (text.length > maxLength) {

                alertMessage.innerHTML = `Clipboard data exceeds the maximum length of ${maxLength} characters.`;

                alertMessage.style.display = "block";

            } else {

                alertMessage.style.display = "none";

            }

        });

    }

});

I'm just sharing this with you to help you,

thanks

Hi Yalda,

For your use case, you can use the JavaScript snippet below to register the paste event handler for the input widget in the OnReady screen event handler flow using the JS element.

JS Snippet:

var inputElement = document.getElementById($parameters.InputId);
 const maxLength = 10; // Set your desired length limit

 inputElement.addEventListener('paste', function(event) {
    const pastedText = event.clipboardData.getData('text');

    // Check if pasted text exceeds the max length
    if (pastedText.length > maxLength) {
        event.preventDefault();
        $actions.CustomFeedbackMsg(`The text you are trying to paste exceeds the maximum length of ${maxLength} characters.`);
    }
});

Demo App: InputPasteEventDemo

Refer to the attached oml 

Kind regards,

Benjith Sam

Hey there, 

I think the problem comes from Javascript's asynchronous handling of events. Javascript will execute the "return $parameters.IsValidPaste;" statement first. This means that the initial value is returned, before the event logic was finished.

I recreated this problem of yours in my own personal environment. This is how I managed to trigger a change in the return value in Outsystems depending on the user's input length

• Use Javascript Promise and use await to make sure that the event logic finished before returning isLonger
• Call another client action with the isLonger as input variable and log the value there to see it changing depending on the input text

// function for keydown event that returns promise whether input longer or less than max length        async function checkPastedData(maxLength) {            
return new Promise((resolve, reject) => {                
const inputField = document.getElementById("inputField");               inputField.addEventListener('keydown', function(event) {                    
if (event.ctrlKey && (event.key === 'v' || event.key === 'V')) {                        inputField.addEventListener('paste', function(pasteEvent) {                            
var pasteData = (pasteEvent.clipboardData || window.clipboardData).getData('text');                           var isLonger = pasteData.length > maxLength;                           
resolve(isLonger);                      
  });                    }                });            });        }        

// main function that sets isLonger and calls other client action with updated value       
async function main() {            
var isLonger = await checkPastedData($parameters.maxLength);            
if (isLonger) {                
console.log("Pasted data exceeds the maximum length.");                
//call other client action with updated value                
$actions.PrintResult(true);            } 
else {                
console.log("Pasted data is within the allowed length.");               
 //call other client action with updated value                
$actions.PrintResult(false);            }        }        
main();

For me this worked fine by calling the Javascript above from the onKeyDown event handler of the input field. 

Hope this works for you as well and excuse the Javascript formatting. I could not make it look prettier.