How to get the content of a <textarea> element

[CarlosFeitozaFilho]

I'm developing a Delphi program where I display TinyMCE on a screen and I need to get the content that the user edited, in Delphi. This sounds simple enough, I just get the content of the <textarea> element to which TinyMCE was applied.

To achieve this, in the callback I called "OnVisitDom" (which is passed to the AFrame.VisitDom method in OnProcessMessageReceived), I just do ADocument.GetElementById('content').GetValue, but I don't get any content!

The question then is simple: how do I get the content of a <textarea> so that I can use it on the Delphi side?

[salvadordf]

Hi,

The DOMVisitor demo shows how to get the element value. It's recommended to execute JavaScript to get that value because the DOM features in CEF are not as powerful as the JavaScript ones.

These are the code comments inside the "SimpleNodeSearch" function :

Code: Select all

            // Here we send the name and value of the element with the "console trick".
            // The name and value contents are included in TempMessage and the we
            // execute "console.log" in JavaScript to send TempMessage with a
            // known preamble that will be used to identify the message in the
            // TChromium.OnConsoleMessage event.

            // NOTE : In case you try to read or write node values using the CEF API
            // you should know that ICefDomNode.GetValue and ICefDomNode.SetValue
            // only work in text nodes. ICefDomNode.GetElementAttribute returns
            // the attribute value specified in the HTML and not the current value.

            // It's recommended that you use JavaScript or DevTools methods if
            // you need to get or set the value of HTML elements.
            // For example, if you want to use the "console trick" and you want
            // to get the value of the search box in our forum you would have to
            // execute this JavaScript code :
            // console.log("DOMVISITOR" + document.getElementById("keywords").value);

[CarlosFeitozaFilho]

Hi! Thanks for the answer!

So the only way I can get the dynamic value of the elements is to make use of this device using the JavaScript Console? I have to admit this is VERY disappointing

Well, I managed to get the value of some form elements using GetValue, but that doesn't work with <textarea>.

I would really like to have a control like TWebBrowser, but using modern web technologies and that I could install it on my Delphi Rio

[salvadordf]

The "console trick" is just a easier way to get the results.

You can also register a JavaScript extension as you can see in the JSRTTIExtension and JSExtension demos to avoid using the console.

[CarlosFeitozaFilho]

The "console trick" is just a easier way to get the results.

You can also register a JavaScript extension as you can see in the JSRTTIExtension and JSExtension demos to avoid using the console.

I will see this, thank you!

[glamenoise]

More importantly how can you change the content of a <textarea>? The simple following javascript does not work apparently:

document.getElementById("someID").innerHTML = 'Hello World!';

or even the alternative:

document.getElementsByName("someID")[0].innerHTML = 'Hello World!';

Any suggestions?

[salvadordf]

Hi,

Try using TChromiumCore.ExecuteJavaScript with the following code :
https://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript

[glamenoise]

I solved the problem to change the content of a <textarea>. The issue I encountered was due to the size of the data:

Script := 'largeString = ' + QuotedStr(myData) + ';' + crlf +
'element = document.getElementsByName(' + QuotedStr(myTextArea) + ')[0];' + crlf +
'textNode = document.createTextNode(largeString);' + crlf +
'element.appendChild(textNode);';

myData being larger than 1024 bytes the script would not execute. I had to use this work around:

while length(myData) > 0 do
begin
Chunk:= copy(myData, 1, 1024);
Script := 'largeString = ' + QuotedStr(Chunk) + ';' + crlf +
'element = document.getElementsByName(' + QuotedStr(myTextArea) + ')[0];' + crlf +
'textNode = document.createTextNode(largeString);' + crlf +
'element.appendChild(textNode);';
Frame.ExecuteJavaScript(Script, '', 0);
Delete(myData, 1, 1024);
end;