How to Change Text Value on Canva.com with Javascript - javascript

I am trying to change the value/text of a text node in canva.com.
I am able to change it visually but when I reload the page, or try to download the design, the old placeholder text is shown.
In canva when you change anything it automatically saves the changes, but you can also do this manually. I have tried manually saving but with no luck, only the old placeholder text is saved.
I have tried changing the text with the following methods.
The text is in a span so at first I tried to change that one.
var all_texts = document.getElementsByClassName("S1PPyQ");
all_texts[0].innerText = "HEY";
all_texts[0].textContent = "HEY";
all_texts[0].outerText = "hey"
After that I tried to get the parent node, which was a p tag. So basically the same code as above just with a different class name. This also did not work.
Any help is appreciated.

Related

Cannot insert text into a message field on messenger.com

This is not one of those "how to insert text in input" questions. I've checked them all.
So I need to insert some text on page load into the message field on message.com.
The problem is that while the input is empty, it is just a <br data-text="true"> element. Then if you type something in, it changes to <span data-text="true"></span>. React does that.
I can add text to this span's innerHTML or textContent but in order for the tag to appear, I still need to type one letter manually into the message field. If i try to change innerHtml or textContent on br element nothing happens.
I tried selection and range:
let selection = window.getSelection();
let range = selection.getRangeAt(0);
let node = document.createTextNode(text)
range.insertNode(node);`
it kinda works, in a way that I just insert a new textnode, but I cannot send that text, so it is useless.
I spent all day on this and now I'm not even sure if it is possible.
OK, so for everyone who stumbles upon something similar, when you just can't change the DOM directly, as all the answers to similar problems suggest, here is my solution. It is SO simple.
You could use clipboard API. First you add the text to the clipboard with:
navigator.clipboard.writeText('text') It returns a promise in case you need it.
Then you paste the text at cursor position with document.execCommand('paste');
And that's it! In my case, as this was a part of my chrome extension, i also needed to put in the permissions key in manifest.json the following permissions: "clipboardRead", "clipboardWrite"
Good luck!
P.S. As i see tt is a new feature and is not available in IE and Safary.

Changing Text Value With JavaScript Doesn't Affect It's Real Value

I want to change text element with javascript code and click the button. I'm changing html text value with javascript code :
document.getElementsByName('query')[0].value = "test";
and i'm focusing in that element with :
document.getElementsByClassName('input choice-input text-input')[0].focus();
and then i'm clicking the button :
document.getElementsByClassName('choice-input load-button')[0].click();
But at the end the text element still has old variable in it. It's looks like working but it's just visually i guess. When i type some character after running
document.getElementsByName('query')[0].value = "test";
code and then delete it manually it's working. I think i should change text element with another code or i have to refresh it somehow. Thanks!

How to remove the placeholder once set value in JavaScript

I'm unable to remove the placeholder after set the user name.
Anyone have idea how to remove place holder once set user name by using console
Link : https://login.microsoftonline.com
document.getElementById("i0116").value = "singapore#mail.com"
The trick is, Microsoft didn't used native HTML placeholder. They have added extra div for placeholder. You just need to hide that div after setting the value. Please see following code
document.getElementById("i0116").value = "singapore#mail.com";
document.getElementsByClassName("phholder")[0].style.display = "none";
Modified:
Microsoft is using Knockout for data binding. That's why you need to fire change event to set the values in ViewModel. Use following code after above two lines.
var event = new Event('change');
document.getElementById("i0116").dispatchEvent(event)

How to change and track changes to a textarea

I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.

how to set the value of textarea with toolbar using javascript?

I'm trying (from my firefox extension) to set the value of a textarea with toolbar which placed when creating a blog before posting it like in blogger or live-journal.
In simple textarea I can get or set the textarea value by:
var myTextArea = gBrowser.contentDocument.getElementsByTagName("textarea")[0];
alert(myTextArea.value); // alerts the old value
myTextArea.value = "this is the new value of the textarea";
where there of course was only one textarea.
The problem is in textarea with toolbar.
I succeeded changing the value of the textarea i'm writing in right now even though it has toolbar, but in all other sites especially blog sites the element value is changed but the text in the page stays the same.
I thought maybe the textarea is CKEditor but I don't know it's name so I can't use:
FCKeditorAPI.GetInstance('InstanceName').insertText("new value in textarea");
is the textarea in sites such as mentioned above is CKEditor? and more important - how do i set the it's value?
thanks!
I believe you can do:
for(x in CKEDITOR.instances) {
CKEDITOR.instances[x].insertText("new value in textarea");
}

Categories