Get change event to work without needing to blur the control

[Wil van Antwerpen]

Hi,

As is documented, the change event only works after the user has focused out of the control.
That might be useful for some point of view as it can help a lot with limiting the amount of events triggered and thus important from a performance point of view.

The problem is that I need to detect if the user has made a change in the text.
Obviously I'm already checking the contents of the RTE control against how it was loaded from a database and that's a good start.

However as the RTE also cleans up html - such as changing & to & - it would also be great if I can detect if the user actually made a change. IOW starts typing in the text. I don't want to know if they used arrow keys or other navigation keys (page up/down/home/end...etc)

The reason for all this is that I don't want to trigger "Do you want to save" prompts on users navigating away while they haven't made a change to the content.

Hope this makes sense.
--
Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

Your requirement to trigger change event when user has made a change in the Editor can be achieved by using the saveInterval property value as "1" which specifies the saveInterval in milliseconds for autosave the value. The change event will be triggered if the content was changed from the last saved interval.

Code snippet:

var defaultRTE = new ej.richtexteditor.RichTextEditor({

  change: change,

  saveInterval: 1,

});

defaultRTE.appendTo('#defaultRTE');

function change() {

  console.log('Change event triggered');

}

Sample: https://stackblitz.com/edit/wgpxpz?file=index.js

API Link: https://helpej2.syncfusion.com/javascript/documentation/api/rich-text-editor/#saveinterval

Regards,

Vinitha

[Wil van Antwerpen]

Hello Vinitha,

Thank you. That seems like it would work for my requirements.
I will probably use a higher value than 1 as I don't need it to check every millisecond, but that's an implementation detail.

Curiously the change event only triggers one time whereas the documentation for saveInterval mentions it triggers every time it changed since last time. Not a problem for me btw, just found it curious.

Thanks again.

--

Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

We are glad to assist you.

The change event will be triggered if the content was changed from the last saved interval and not every time.

Regards,

Vinitha

[Wil van Antwerpen]

Hello Vinitha,

Thank you for taking the time to answer.
I might not have explained myself well or I am misunderstanding the mechanism here. It is important that I understand the mechanism correctly.

Let me try again.
As in the StackBlitz example, the saveInterval is set to 1 millisecond.

So the change event triggers the moment you type anything in the RTE. That's perfect.

However as the save interval is only set to 1 millisecond. I would have expected the change event to trigger again each time you type in the RTE. However I never see it triggered again? So even after changing the content since the last save interval, the event doesn't trigger.

It is possible that this is by design, or that I do not understand the saving mechanism.

Can you please clarify this?

thanks,

--
Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

We would like to clarify that when you use the saveInterval property set to 1, the change event will be triggered only when the content has changed since the last saved interval. In other words, the event will be triggered when changes are made to the editor, but it won't trigger while you are actively typing text. The change event will trigger during the idle state, after the typed content has been entered.

Regards,

Vinitha

[Wil van Antwerpen]

Hello Vinitha,

That's perfect thanks.
But when I test it with the example in stackblitz from your first reply that is not what I am seeing. It only ever executes the change event one time. Testing with the latest FireFox browser btw.

I also tried adding the "autoSaveOnIdle" setting to true, but it made no difference from what I can see.

edit:
Not sure what is happening. I executed a console.log line from the console and that's when I saw it trigger another change event. This I could reproduce, with autoSaveOnIdle set. So it seems it works, just not sure why it isn't triggering without running that line. From what I see FireFox isn't removing duplicate lines from the console log either.

second edit:
Yes it was Firefox removing duplicate lines. I completely missed the repeat number in the log repeating as it is located on the right hand side instead of in front of the line.
Mea Culpa, learned something new. My apologies.

Let's consider the issue closed.

Thank You.

--
Wil

[Vinitha Jeyakumar]

Hi Wil van Antwerpen,

We are glad that your issue has been resolved. 

Regards,

Vinitha

[Steve Diaz]

Hello

To detect changes in a text control like an RTE (Rich Text Editor) without needing the user to blur the control, you can use JavaScript or jQuery to listen for input events. Input events occur when the user interacts with the text, such as typing. Here's an example of how you can achieve this:

// Assuming you have an RTE element with the id "myRTE"

var rte = document.getElementById("myRTE");

var originalContent = rte.innerHTML; // Store the initial content

rte.addEventListener("input", function() {

    // The input event will trigger whenever the user changes the content

    var newContent = rte.innerHTML;

   

    // Compare the new content with the original content

    if (newContent !== originalContent) {

        // Content has been changed

        // You can set a flag or perform any action you need

    }

});

In this code, we first store the original content of the RTE element. Then, we add an event listener for the "input" event on the RTE element. This event will be triggered whenever the user types or makes changes in the RTE. Inside the event handler, we compare the new content with the original content to determine if a change has occurred.

This way, you can track changes in the text without requiring the user to blur the control and trigger unnecessary "Do you want to save" prompts when they haven't made any changes.

Thank you

Salesforce Marketing Cloud Training

[Vinitha Jeyakumar]

Hi Steve Diaz,

Thanks for sharing your solution with us. 

Regards,

Vinitha