SImulate "Enter pressing" when submit button is clicked - javascript

When my submit Button in the form is clicked, I need to simulate that the "Enter button" is pressed. so: clicking on the submit form is equal to pressing Enter on the keyboard. Because I want to have the same method for both...
Here is what I have, but until now it doesnt works..
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").focus();
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
});

try something like this, not tested it, hope it helps!
function keyUpFunc(e) {
var keyCode_Enter = 13;
if (e.keyCode === keyCode_Enter) {
e.preventDefault();
$('#send').trigger("click");
}
}
$(document).keyup(keyUpFunc);
$(document).on('click', '#send', function(){
// Click Event handler for send
});

I am not sure what are you trying to achieve here. But if you want that I think this link has answer to simulate keypress via jQuery.
Definitive way to trigger keypress events with jQuery
Copied code from link:
var e = jQuery.Event("keydown");
e.which = 13; // # Some key code value
$("input").trigger(e);

Try this:
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").trigger({
type: "keypress",
which: 13,
keyCode: 13});
});
hope it helps!

Related

Trigger a "ENTER" in programmatically

It is possible to program a "Enter" after a value is added to a input text box?
If yes, I need help on my code below. It does't trigger the "ENTER" keypress.
My code as below:
$('#clo_cart').click( function () {
/*Save ENTER in variable*/
var eneterKey = jQuery.Event("keydown");
eneterKey.which = 13;
eneterKey.keycode = 13;
$("#scan_char").focus().val('CLOSECTN').trigger(eneterKey);
}//end of button click
Pls Help
Just replace the keydown event with keypress event. There are some differences between how they use event.which property. This might be one of the cases where the two of them use different values for event.which.
var eneterKey = jQuery.Event("keypress");
Also note that which property has been deprecated. You can compare with the event.key property. It should have value Enter when the enter key is to be simulated.
$('#clo_cart').click( function () {
/*Save ENTER in variable*/
var eneterKey = jQuery.Event("keydown");
eneterKey.key = 'Enter';
$("#scan_char").focus().val('CLOSECTN').trigger(eneterKey);
}
You can use this code,
$('#clo_cart').click( function () {
var e = $.Event( "keypress", { which: 13 } );
$("#scan_char").focus().val('CLOSECTN').trigger(e);
}//end of bu
This code below work fine for me.
$('#clo_cart').click( function () {
$("#scan_char").focus().val('CLOSECTN').trigger(enterKey());
}//end of button click
/* Function to allow program keypress ENTER */
function enterKey() {
return $.Event( "keypress", { which: 13 } );
}

jQuery trigger press enter not working

This is my script:
$('.target input').val('my value');
$('.target input').trigger(jQuery.Event('keypress', { keycode: 13 }));
The first line worked and the value set correctly, then I need to press the enter in input element, but the second line not worked. I mean the event not fired:
$('.target input').keyup(function(e){
if(e.keyCode == 13)
{
alert($(this).val());
}
});
when I press the enter manually the event fires but with javascript the event not fired. where is the problem?
You need to trigger keyup event in order to fire keyup event handler. Although the property keycode should be changed to keyCode since object property is case sensitive Javascript.
$('.target input').trigger(jQuery.Event('keyup', { keyCode: 13 }));
$('.target input').keyup(function(e) {
if (e.keyCode == 13) {
alert($(this).val());
}
});
$('.target input').val('my value');
$('.target input').trigger(jQuery.Event('keyup', {
keyCode: 13
}));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">
<input/>
</div>
FYI : You need to bind event handler before the event triggering with the code, otherwise it won't listen to the event triggered before the listener is attached.
Although object properties passing on jQuery.Event supports 1.6 onwards, so check your jQuery version.
As of jQuery 1.6, you can also pass an object to jQuery.Event() and its properties will be set on the newly created Event object.
var e = jQuery.Event("keydown");
e.which = 13;
$(".target input").trigger(e);
This should do the work for you,
var e = jQuery.Event("keypress");
e.which = 13; //choose the one you want
e.keyCode = 13;
$("#theInputToTest").trigger(e);
FIDDLE
Basically you need to trigger keyup event as I did in the fiddle.
HTML
<input type=text />
JS
$(":input").keyup(function(e){
if(e.which==13){
alert("Fired");
}
});
$(":input").val("TEST");
$(":input").trigger($.Event("keyup",{which:13}));

Sending keypress to a form field

I want a user to click on something, have it auto-fill an input field (a search field), and then automatically send an enter keypress to execute it. My code below, it does not appear to send the enter command. It my code, I will have to manually press enter to start the search. Is there an error in the code? Thanks.
jsfiddle here: https://jsfiddle.net/eliluong/5n50mun2/
$('.clickme').bind('click', function() {
var $this = $(this);
var input_text = "search for this";
$('#quicksearch').val(input_text);
$('#quicksearch').focus();
var e = jQuery.Event('keypress');
e.which = 13;
$('#quicksearch').trigger(e);
});
Not too sure but replace this:
$('#quicksearch').trigger(e);
With This:
$(this).trigger(e.which);
Alternatively, you could just use JQueries Built in submit function, no need to capture the keypress:
$('.clickme').click(function () {
var input_text = "search for this";
$('#quicksearch').val(input_text);
$('#quicksearch').submit();
});
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
$("#quicksearch").trigger(e);
Haven't you forgotten the third line of the above code?
Moreover you have to click the button that submits the form, not the #quicksearch button :)

Simulate keyboard click via jQuery

I'm trying to simulate keyboard click for Ctrl+Esc via jQuery but it is NOT working.
var e=jQuery.Event("keydown",{keyCode:17} && jQuery.Event("keypress",{keyCode:107}));
jQuery("body").trigger(e);
Any idea?
This?
var press = jQuery.Event("keypress");
press.ctrlKey = true;
press.which = 27;
$(document).trigger(press);
To check which is the keycode of the button: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
I got the main idea from this answer: Simulate Keypress With jQuery
What you have done:
var e =
jQuery.Event(
"keydown", {keyCode:17}
&&
jQuery.Event(
"keypress",{keyCode:107}
)
);
jQuery("body").trigger(e);
As you can see, this is a wrong syntax.

How to trigger the enter keypress

I need to know how to trigger an enter key on an input. That is, in response to some other event (not a keypress), I need to trigger a keypress of value 13.
(Clarification, I do not want to trigger some event when the enter key is pressed. If I didn't know how to do that, I could find that that's been asked and answered several times on SO. I want the reverse. I am trying to develop a workaround that requires I emulate an 'enter' keypress.)
You can do this -
var e = $.Event( "keypress", { which: 13 } );
$('#yourInput').trigger(e);
http://api.jquery.com/category/events/event-object/
http://api.jquery.com/trigger/
var e = $.Event( "keyup", { keyCode: 13 } );
$('#yourInput').trigger(e);
Worked for me, instead of 'which', I used 'keyCode'
Simulate enter keypress
var e = jQuery.Event("keypress");
e.which = 13
e.keyCode = 13
$('#email').focus();
$('#email').trigger(e);
capture enter keypress
$('#email').keypress(function (e) {
if (e.which == '13') {
alert('code');
}});

Categories