0

the element's event listenersenter image description hereI've tried the following & they do not work:

document.querySelector("[placeholder=Title]").dispatchEvent(new KeyboardEvent('keypress',{'key':'70'}));

document.querySelector("[placeholder=Title]")..dispatchEvent(new KeyboardEvent('keyup',{'key':'70'}));


document.querySelector("[placeholder=Title]").value = 'titleTextProgramaticallyInput'[![jav][1]][1]

The title element is preventing me from programatically clicking 'Post'

URL: https://www.reddit.com/user/yourUsername/submit

enter image description here

Ask P
  • 355
  • 2
  • 14
  • Try to send an `input` event to that ``. – Titus Feb 14 '20 at 00:36
  • Would you provide example code? e.g. document.querySelector("[placeholder=Title]").oninput(...) – Ask P Feb 14 '20 at 00:46
  • `.dispatchEvent(new Event('input', { bubbles: true }))` – Titus Feb 14 '20 at 00:48
  • tried this: document.querySelector("[placeholder=Title]").dispatchEvent(new Event('input', { bubbles: true })) – Ask P Feb 14 '20 at 00:53
  • No luck. Wrong target element? Wrong event? – Ask P Feb 14 '20 at 00:54
  • Try an `insertText`, eg: `var el = document.querySelector("[placeholder=Title]"); el.focus(); el.ownerDocument.execCommand('insertText', false, 'titleTextProgramaticallyInput')`. – Titus Feb 14 '20 at 01:02
  • Interesting approach. Unfortunately didn't work. – Ask P Feb 14 '20 at 01:06
  • Check what events are registered to that element, in Chrome you can use `getEventListeners(document.querySelector("[placeholder=Title]"))` from the console. – Titus Feb 14 '20 at 01:15
  • I posted a picture of it's event listeners. How would I use that info? – Ask P Feb 14 '20 at 01:26
  • Probably one of those listeners' callback function changes the number in the `0/300` label and enables the button. There is a listener for `input`, the `.dispatchEvent(new Event('input', { bubbles: true }))` should have triggered that. Another thing to try will be simulating a clipboard paste. – Titus Feb 14 '20 at 01:30
  • I tried ```document.querySelector("[placeholder=Title]").value = 'title'; document.querySelector("[placeholder=Title]").dispatchEvent(new Event('input', { bubbles: true }))``` again, still no luck. – Ask P Feb 14 '20 at 02:21
  • Also tried ```document.querySelector("[placeholder=Title]").addEventListener('paste', (e) => { e.preventDefault(); const text = (e.originalEvent || e).clipboardData.getData('text/plain'); window.document.execCommand('insertText', false, text); }); ``` to simulate paste, no luck. Is there a alternative way to simulate pasting more likely to work? – Ask P Feb 14 '20 at 02:22

1 Answers1

1

Reddit is using react, so these input fields are hidden behind layers of complexity. See this SO post.

Using the instructions from there you can light up the post button by triggering it's actual set method from the textArea prototype:


var titleElement = document.querySelector("[placeholder=Title]");
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
nativeInputValueSetter.call(titleElement, 'react 16 value');

var triggerUpdateEvent = new Event('input', { bubbles: true});
titleElement.dispatchEvent(triggerUpdateEvent);
aradil
  • 492
  • 7
  • 12
  • Great insight. I can light it up with this code but cannot `titleElement.click()` it. – Ask P Feb 14 '20 at 21:07
  • Presumably the same problem - need to call the prototype method on the input button. – aradil Feb 14 '20 at 21:08
  • Actually, nevermind, worked fine for me. ```document.querySelector("._2JBsHFobuapzGwpHQjrDlD").click();``` where that class selects the button. I don't think you mean you are trying to click the title, right? – aradil Feb 14 '20 at 21:10
  • You did it dude! worked. (clicked the wrong element in my initial comment, oops) – Ask P Feb 14 '20 at 21:19