The following should work. You just have to make 1 modification to your current code: You must add an id to your text area. If you copy the code that's included then you can do this.
There is another issue that this does workaround. If you press enter, it starts a new line. This doesn't work. If you just press enter, it will submit the message. With this, if you press shift+enter, then it will start a new line. If you just press enter, then it will submit it! This means that you can submit multi-line messages and submit the messages with the enter key.
A detailed walk-through of everything that's happening in the code is included in the form of comments.
// get the chatbox and set the default value for if the shift key and enter key was pressed
var chatbox = document.getElementById("chatbox_main"), shiftPressed = false, enterPressed = false;
// listen for the user to press a key
chatbox.addEventListener("keydown", function(e) {
// check if the shift key was pressed and say if it was
if (e.shiftKey) shiftPressed = true;
// check if the enter key was pressed
if (e.keyCode == 13) {
// prevent the enter key from putting in a new line. If shift it pressed, it will be manually added later
e.preventDefault();
// say that the enter key was pressed
enterPressed = true;
}
});
// listen for the user to let go of a key
chatbox.addEventListener("keyup", function(e) {
// check if the shift key or enter key was released
if (e.shiftKey || e.keyCode == 13) {
// check if the enter key was pressed, and if it wasn't, then reset the shift pressed value because it was only shift that was pressed
if (!enterPressed) shiftPressed = false;
// enter was pressed, so move on
else {
// make sure that shift wasn't pressed along with enter
if (!shiftPressed) {
// get the input from the chatbox and define if the chatbox should be cleared
var input = chatbox.value;
// prevent the enter key from being typed into the chatbox
e.preventDefault();
// run you custom code here!
alert("You submitted this:\n" + input);
// clear the chatbox
chatbox.value = "";
// reset the value
enterPressed = false;
// shift and enter was pressed, so move on
} else {
// shift + enter was pressed, so put in a new line
chatbox.value += "\n";
// reset the values and let the enter key get pressed
enterPressed = false, shiftPressed = false;
}
}
}
});<textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W" id="chatbox_main"></textarea>