firstly English isn't my native language, sorry if I have any mistakes.
There is message sending problem in the function, I've played with Jquery codes but I couldn't fix it.
When I press the Enter, message reach to receiver, that's good.
But when I press the Shift with Enter, message reach to receiver again,
I want to create new line when press the both keys.
Jquery codes:
$(document).ready(function() {
$('input#chat').bind('keydown', function(e) {
if(e.keyCode==13) {
// Store the message into var
var message = $('input#chat').val();
var id = $('#chat').attr('class');
if(message) {
// Remove chat errors if any
$('.chat-error').remove();
// Show the progress animation
$('.message-loader').show();
// Reset the chat input area
document.getElementById("chat").style.height = "25px";
$('input#chat').val('');
Did you try it ?
if(e.shiftKey && e.keyCode==13){
// Don't fill
} else if(e.keyCode==13){
e.preventDefault();
// Store the message into var
var message = $('input#chat').val();
var id = $('#chat').attr('class');
if(message) {
........................
}
In this, while the shift key is pressed a boolean prevents the code from being run.
var ShiftDown = false; //Is false when not being pressed, true when being pressed
$(document).ready(function() {
$('input#chat').keydown(function(e) {
if(e.which === 16) {
//Shift key is pressed
ShiftDown = true;
}else if(e.which === 13){
//Code will only run if Shift key is not pressed
if(ShiftDown === false){
// Store the message into var
var message = $('input#chat').val();
var id = $('#chat').attr('class');
if(message) {
// Remove chat errors if any
$('.chat-error').remove();
// Show the progress animation
$('.message-loader').show();
// Reset the chat input area
document.getElementById("chat").style.height = "25px";
$('input#chat').val('');
}
}
}
})
$('input#chat').keyup(function(e) {
if(e.which === 16){
//Shift key is no longer pressed
ShiftDown = false;
}
});
}
I've just changed
$('input#chat').bind('keydown',function(e){})
to
$('input#chat').keydown(function(e){})
Related
HTML Button that I create
I wanted to know if there is something for an HTML button, simulate that the ENTER key was pressed. Since I need a button to send an automatic chat in which I am working. I was able to implement the button, although it still does not perform any action. The messages are sent by pressing the ENTER key, so I wanted to find a way to simulate that action. Thank you
var fncTxMessageKeydown = function (e) {
e = window.event || e;
var keyCode = (e.which) ? e.which : e.keyCode;
if (keyCode == 13 && !e.shiftKey) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var message = elements.txMessage.value.toString().trim();
if (message!=""){
if (gotUid==true) {
EngtChat.sendMessage(message);
elements.txMessage.value = "";
}
else{
//show initialization alert and reconnect socket
document.getElementsByClassName("engt-sheet-header-with-presence")[0].style.padding="7px";
socket.disconnect();
socket.connect();
}
}
return false;
}
};
if (elements.txMessage != undefined) {
elements.txMessage.onkeydown = fncTxMessageKeydown;
I'm having an issue with my chat bot app where a line break is being inserted into the form after the user is pressing the submit button. To clarify, the message is being sent, but then creating a line break so the user has to backspace for the form to be completely empty.
var enableEnterKey = function() {
$(document).keypress(function(e) {
if($('#maxx-message-box').is(':focus') && e.keyCode === 13) {
var message = $('#maxx-message-box').val();
sendMessage(message);
}
});
This is our function. Please help.
You probably need something like:
$("#maxx-message-box").keypress(function (e) {
if (e.keyCode != 13) return;
var message = $("#maxx-message-box").val().replace(/\n/g, "");
if (!!message)
{
sendMessage(message);
$("#maxx-message-box").val("");
}
return false;
});
I'm trying to create a note system. Whatever you type into the form gets put into a div. When the user hits Enter, they submit the note. However I want to make it so when they hit Shift + Enter it creates a line break a the point where they're typing (like skype). Here's my code:
$('#inputpnote').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode=='13' && event.shiftKey){
$("inputpnote").append("<br>");
}
else if(keycode == '13'){
var $pnote = document.getElementById("inputpnote").value;
if ($pnote.length > 0) {
$("#pnotes-list").append("<div class='pnote-list'><li>" + $pnote + "</li></div>");
$('#inputpnote').val('');
}
}
});
#inputpnote is the form where the user enters their note and #pnotes-list is the place where the notes are being appended to. Thank you in advance!
I think for this you'd have to set two global variables, 1 for shitftKeyPress and 1 for enterKeyPress and then you'd need a keydown and a keyup to set those values and then you check to see if they are both true, because your logic is saying, when a key is pressed, execute this code, if you press a key and then press another key, the only that will happen is the function will be called twice.
EDIT:
Example code of what it should look like:
var hasPressedShift = false;
var hasPressedEnter = false;
$('#inputpnote').keydown(function(event){
if(shiftkey) {
hasPressedShift = true;
}
if(enterKey) {
hasPressedEnter = true;
}
});
$('#inputpnote').keyup(function(event){
if(shiftkey) {
hasPressedShift = false;
}
if(enterKey) {
hasPressedEnter = false;
}
});
$('#inputpnote').keypress(function(event){
if(hasPressedShift && hasPressedEnter) {
// Do something
}
});
This was a quick mock up, but it's similar to how it should look
I tried to use this for a simple hotkey function, that reacts to keypress for some keys, but doesn't if your editing in the box with the given ID. Unfortunately now Hotkeys are disabled always. I get the alert() all the time :(
the textfield is on e.g. http://tyrant.40in.net/kg/news.php?id=160#comments
Inside the text area it works but my script does not recognize, whether I'm inside the text area or outside (it also doesn't help to click in textarea and click outside).
Please help me.
I also tried to do it another way by selecting (!$('#tfta_1 #search')) instead of $('html'), so that the hotkeys do not work wenn you are in of of these IDs. Unfortunately this did not work ether.
edit: the js also has tocheck if crtl, alt, shift to avoid interpret
// Hotkeys (listen to keyboard input)
$('html').keypress(
function(event){
// is cursor at the beginning / end of edit box
var textInput = document.getElementById("tfta_1"), val = textInput.value;
var isAtStart = false, isAtEnd = false;
if (typeof textInput.selectionStart == "number") {
// Non-IE browsers
isAtStart = (textInput.selectionStart == 0);
isAtEnd = (textInput.selectionEnd == val.length);
} else if (document.selection && document.selection.createRange) {
// IE branch
textInput.focus();
var selRange = document.selection.createRange();
var inputRange = textInput.createTextRange();
var inputSelRange = inputRange.duplicate();
inputSelRange.moveToBookmark(selRange.getBookmark());
isAtStart = inputSelRange.compareEndPoints("StartToStart", inputRange) == 0;
isAtEnd = inputSelRange.compareEndPoints("EndToEnd", inputRange) == 0;
}
// combine information -> is cursor in edit box?
var eb = isAtStart + isAtEnd;
// if in comment box
if ( eb ) {
// do nothing
alert('You are in the comment box');
}
// if key 'p' is pressed
else if (event.which == 112){
// open profile page
window.location = home + 'profile.php';
}
// if key 'q' is pressed
else if (event.which == 113){
// open quests overview
window.location = home + 'quests.php';
}
// if key 'r' is pressed
else if (event.which == 114){
// open raids overview
window.location = home + 'raids.php';
}
// if key 'f' is pressed
else if (event.which == 102){
// open fraction tracker
window.location = home + 'factiontracker.php';
}
}
);
You need to check the event.target property.
if ('textarea' == event.target.tagName.toLowerCase()) {
return;
}
Or:
if ($(event.target).is('textarea')) {
return;
}
As for the modifier keys, see event.shiftKey, event.ctrlKey and event.altKey.
I want to create a Google Chrome extension that, among other things, will modify the chat text based on what is inputed. I will add a button next to the video, call, and add people buttons below the name, and when clicked will activate the modifications. I don't want to have to put any more scripts on the page than I have to, so I would like to be able to send the messages the way Gmail would be pressing "return" in the chat box. Also I want to to be able to show that both of the people chatting are using my extension by displaying text in the chat box just like the "This chat is off the record" text is, and possibly if both are using it add extra stuff to the chat. What I tried to do was make an imitation textarea and when the user 'sends' it, grab it and modify it, then insert it into the real one and send the new text. I can change the text but can't seem to send it...
Heres what I have so far, I enclosed everything in a setInterval to check if chat box exists and add appropriate stuff to it:
var chatBtnClone = setInterval(function() {
if ($("body").find(".nH .NG").length > 0) { //if chat is active
var clone = $("body").find(".nH .NG .NJ").first();
if (clone.children()[0].className.indexOf("chat") < 0) { //if already added my class
var clonned = clone.clone();
var clonnedChd = clonned.children().first();
clonnedChd.attr("title", "Start encrypted chat");
clonnedChd.on('click', function() {
console.log("clicked chatBtn!"); //make sure it works
var self = $(this);
if (self[0].className.indexOf("chatEncX") >= 0) { //toggle button pic
self.removeClass('chatEncX').addClass('chatEnc');
self.attr("title", "Stop encrypted chat");
} else {
self.removeClass('chatEnc').addClass('chatEncX');
self.attr("title", "Start encrypted chat");
}
});
clone.parent().prepend(clonned);
clonned.find('.NK').removeClass("NK-Y8").addClass("chatEncX");
}
var chatBoxs = $('body').find(".nn .AD");
var chatArea = chatBoxs.first().find(".nH textarea"); //get chat textareas
if (chatArea.length === 1) {
var clonChatArea = chatArea.first().clone();
clonChatArea.removeAttr("id");
chatArea.first().parent().append(clonChatArea);
// chatArea.first().hide();
var chatTextDiv = chatBoxs.first().find(".jp .nH .nH").first();
clonChatArea.focusin(function() {
chatTextDiv.removeClass("gv").addClass("f7");
});
clonChatArea.focusout(function() {
chatTextDiv.removeClass("f7").addClass("gv");
});
clonChatArea.on('keyup', function(event) {
var self = this;
//console.log(this.style.height); //make sure height it working
if (self.scrollHeight === 38) {
self.style.overflowY = "hidden";
self.style.height = "36px";
} else if (self.scrollHeight === 47) {
self.style.height = "54px";
} else if (self.scrollHeight === 62) {
self.style.height = "72px";
} else if (self.scrollHeight >= 77) {
self.style.height = "80px";
self.style.overflowY = "scroll";
}
if( event.keyCode === 13 && event.shiftKey ){
//regular, just insert a newline
} else if (event.keyCode === 13) {
//grab text and modify then reinsert into real textarea
var chatTxt = $(this).val();
var chatHidden = chatBoxs.first().find(".nH textarea").first();
var chatEncTxt = Crypto.AES.encrypt(chatTxt, "pass"); //modify text
//console.log(chatEncTxt);
chatHidden.val(chatEncTxt);
chatHidden.focus();
chatHidden.trigger({ type : 'keypress', which : 13 }); //try to imitate the return key and send (NOT WORKING!!!)
// $(this).focus();
}
});
}
}
},150);
This might be a bit late, but if anyone else is interested then I managed this by doing the following:
var e = new Event("keypress");
e.keyCode = e.which = 13;
// :mc is an example textarea id, but the OP has the code for finding that already
document.getElementById(':mc').dispatchEvent(e);