CODEWITHSUNDEEP
javascriptjquery
yask
yask

Reputation: 4278

I am trying to send text- messages on WhatsApp with javascript?

I am trying to send text messages on whatsapp web version on chrome. (www.web.whatsapp.com)

This is the code:

document.getElementsByClassName("input")[1].innerHTML="This message was written via JS script! ";

var input = document.getElementsByClassName("icon btn-icon icon-send");
input[0].click();

But the problem is , initially when no text is present the input box looks like this: enter image description here

And only when I physically write some text it changes to this:

enter image description here

And only now my script works since it requires the Send text button.

I tried Jquery code to simulate keypresses at $('.input)by following function:

function pressKey() {
  var e = jQuery.Event("keypress");
  e.which = 32; // # space
  $(".input").trigger(e)[1];
  e.which = 91;
  $(".input").trigger(e)[1];
  e.which = 32; // # space
  $(".input").trigger(e)[1];
  e.which = 32; // # space
  $(".input").trigger(e)[1];

}

It didn't work.

How can I get the Send text button by script?

Here is the screen recording :

Upvotes: 4

Views: 19032

Answers (8)

nino.porcino
nino.porcino

Reputation: 1183

This works in Dec 2019. Original snippet by Shubham modified by Cami Rodriguez (see comments above).

function write_in_chat(text) {
   var input = document.querySelector('#main [contenteditable~=true]');
   setTimeout(() => {       
      input.innerHTML = text;
      input.dispatchEvent(new Event('input', {bubbles: true}));
      var button = document.querySelector('button>span[data-icon="send"]').parentElement;
      button.click();
   }, 500);
}

Upvotes: 3

Rodrigo Manguinho
Rodrigo Manguinho

Reputation: 1411

All options didn't work for me. Thats what I did.

function sendMessage(message) {
    var evt = new Event('input', {
        bubbles: true
    });

    var input = document.querySelector("div.input");
    input.innerHTML = message;
    input.dispatchEvent(evt);

    document.querySelector(".icon-send").click();
}

Upvotes: 13

Shubham
Shubham

Reputation: 151

The following is the updated script. Hope this helps.

var input = document.querySelector('.block-compose .input');
setTimeout(function(){
    for(var j = 0; j < 1; j++) {
        input.innerHTML = "Hello";
        input.dispatchEvent(new Event('input', {bubbles: true}));
        var button = document.querySelector('.block-compose button.icon-send');
        button.click();
    }
},1000);

Upvotes: 4

Luca d&#39;Addabbo
Luca d&#39;Addabbo

Reputation: 59

As Khalid Lafi said, this is the correct script. His code does will return an error when executing

dispatch(document.querySelector("#compose-input div"), "textInput", "hello!");

This is because you should use "input.div" instead of "#compose-input div". The following script is working for me.

function dispatch(target, eventType, char) {
    var evt = document.createEvent("TextEvent");    
    evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
    target.focus();
    target.dispatchEvent(evt);
}


dispatch(document.querySelector("div.input"), "textInput", "hello!");

function triggerClick() {
var event = new MouseEvent('click', {
  'view': window,
  'bubbles': true,
  'cancelable': true
 });
document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event);
}

triggerClick();

Hope this helps.

Upvotes: 5

Liad Livnat
Liad Livnat

Reputation: 7475

This is the working script:

  function dispatch(target, eventType, char) {
            var evt = document.createEvent("TextEvent");
            evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
            target.focus();
            target.dispatchEvent(evt);
        }


        dispatch(document.querySelector(".input-container > .input-emoji .input"), "textInput", "hello!");

        function triggerClick() {
            var event = new MouseEvent('click', {
                'view': window,
                'bubbles': true,
                'cancelable': true
            });
            document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event)
        }
        triggerClick();

Upvotes: 0

Khalid Lafi
Khalid Lafi

Reputation: 114

Try this snippet, while opening a conversation:

function dispatch(target, eventType, char) {
   var evt = document.createEvent("TextEvent");    
   evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
   target.focus();
   target.dispatchEvent(evt);
}


dispatch(document.querySelector("#compose-input div"), "textInput", "hello!");

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event)
}
triggerClick()

Upvotes: 9

Keithamus
Keithamus

Reputation: 1849

Firing an event with a KeyPress into an input will not actually populate the text area because the population is part of the native event.

If your intention is to populate a text field, you'll simply need to set the val. In jQuery this can be done with .val(), e.g.:

function pressKey() {
  $(".input").val('test');
}

The WhatsApp input box probably has an event listener waiting for a keyup event, and if the field is populated, switching it to the send button. If this is the case then you can manually trigger an event which will trigger WhatsApp's (non-native) code.

function pressKey() {
  $(".input").val('test').trigger($.Event('keyup'));
}

Upvotes: 0

Nadeemmnn Mohd
Nadeemmnn Mohd

Reputation: 724

$(".input").on("keypress",function(e){ 
 if(e.which == 32 ||  e.which == 13){ alert('msg sent')};

});

you have to compare == where as you are assigning =

Upvotes: 0

Related Questions