How to bind click(from Button1's click event) event in textbox When I pressed the enter key
$('#idoftextbox').keypress(function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
//enter has been pressed
};
});
<input type="text" name="textbox" id="textbox" />
$("#textbox").bind('keypress', function(e)
{
if(e.which == 13)
{
// enter key was hit, do what you need to do here
}
});
Since you didn't say what "textbox" means to you (as it can be textarea too), I assumed some dummy markup that I posted and then I bound the event to it.
I don't see the reason for binding an event to click and then bind event after that to the element.
Related
http://codepen.io/abdulahhamzic/pen/YqMQwB
How do I make it so that when I press enter on a text input, it calls a function? I tried using this:
<input type="text" onkeypress="clickPress()">
But the problem is I only want to press enter to call that function, not press any key. How do I achieve that?
2022 Update: onkeypress is deprecated.
You can use onKeyDown instead
What you'd want to do is check whether the event's key is the enter key:
In your html, add the event argument
<input type="text" onkeypress="clickPress(event)">
And in your handler, add an event parameter
function clickPress(event) {
if (event.keyCode == 13) {
// do something
}
}
2022 Update: event.keyCode is deprecated on many browsers.
You should do this now:
function clickPress(event) {
if (event.key == "Enter") {
// do something
}
}
Use a form instead (the submit event only runs once instead of every key press):
// Attach the event handler to the form element
document.querySelector('.js-form')?.addEventListener('submit', e => {
e.preventDefault();
alert(e.currentTarget.myText.value);
});
<form class="js-form">
<input type="text" name="myText">
</form>
The Enter button has a keyCode of 13, so you can use the keypress event using jQuery
$("input").keypress(function(event) {
if (event.which == 13) {
alert("Enter was pressed");
}
});
or, in pure javascript:
<input type="text" onkeypress="clickPress(event)">
function clickPress(event) {
if (event.keyCode == 13) {
// do something
}
}
Get the event's keycode and test if it's enter (keycode 13)
<script>
function clickPress(e){
if (event.keyCode == 13) {
// Enter was pressed
alert("enter");
}
}
</script>
<input type="text" onkeypress="clickPress(event)" />
jsfiddle
There could be several "better" ways to do what you want to do but just for the sake of simplicity, you could do this:
<input type="text" id="txt">
Instead of listening to the onkeypress you could attach an event listener within the <script></script> tags and do this:
var myText = document.getElementById("txt");
myText.addEventListener("keyup", function(e) {
if (e.which === 13) {
//The keycode for enter key is 13
alert(e.target.value);
}
});
And yeah this is definitely a duplicate question.
I have one input type search text box, I want to keyCode value within input event. but input event can not return keycode.
Is there any way to get keyCode value within input event?
Please check this Fiddle or code snippet.
$('#search').on('input', function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
console.log(keycode); // undefined got
$('div.log').text(String(keycode));
if (this.value == '') {
alert('Please enter a search criteria!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="search" id="search">
<div class="log">aa</div>
I want to keyCode value within input event. but input event can not return keycode.
As you have identified, what you want it not possible.
Input events can be triggered without keypresses so they don't get any key data in the event object.
Use keyup/press/down if you want to know what key was pressed.
Try This.
<input onkeypress="javascript:return false;" id="txtChar" type="text" name="txtChar">
<span id="spnCode" name="spnCode"></span>
$("#txtChar").on('keydown',function(event){
var textBox = $('#txtChar').val();
var charCode = event.keyCode
$('#spnCode').html('KeyCode: ' + charCode);
return false;
});
Working Demo
I have this text field:
<input id="address" type="text" value="">
and this button:
<input id="ricerca" type="button" class="enter" value="GO!">
and jQuery:
$("#ricerca").click(function(){
var e = jQuery.Event('keypress');
e.which = 13; // #13 = Enter key
$("#address").focus();
$("#address").trigger(e);
});
I want to simulate the "Enter" press INSIDE the #address field, by clicking on the #ricerca button. It is necessary that the cursor is inside the #address field when I press the button.
Can you please say me where are the errors?
define what should happen on keypress event for #address. Look at this code. Press enter key from insde the text box and then click on the button, both trigger the keypress event.
demo - http://jsbin.com/ocohev/1/edit
$(function () {
$('#address').keypress(function (event) {
if (event.which == 13) {
alert("enter pressed");
//return false; only if needed
}
});
$("#ricerca").click(function () {
var e = jQuery.Event('keypress');
e.which = 13; // #13 = Enter key
$("#address").focus();
$("#address").trigger(e);
});
});
Use this Jquery code:
$("#id_of_textbox").keyup(function(event){
if(event.keyCode == 13){
$("#id_of_button").click();
}
});
I have a web application where on one specific screen I have to make sure the user clicked the button using the mouse as opposed to just pressing enter or space.
I have written this code:
$('button').keydown(function (e) {
if (e.which === 10 || e.which === 13 || e.which === 32) {
return false;
}
});
However, this only works for enter. The form can still be submitted by pressing space on a button. I am just wondering what caused this inconsistency and how to get around it?
Edit:
Example fiddle: http://jsfiddle.net/billccn/3JmtY/1/. Check the second check box and pressing enter while the focus is on the button will have no effect. If I further disable the input and expand the keydown trapping to the whole form, then enter cannot be used to submit the form.
Edit 2:
I do have a backup plan which is replacing the button with a link or even a plain div and use the click event to submit the form programmatically. However, extra work is required to make it look like a button so I'd rather use a button is possible.
Just found out: handling space (32) on keyup will prevent the click event.
Updated fiddle: http://jsfiddle.net/3JmtY/2/
Missed the Point of your Question. After some googleing if found the following trick:
Bind the keypress event to your from and listen to it's keycode. If the keycode is 13
(enter), prevent all default actions (event.preventDefaul()) and prevent further event bubbeling ( return false; ).
Her is a fiddler code example:
HTML:
<form id="target" action="destination.html">
<input type="text" value="Hello there" />
<input type="submit" value="Go" />
</form>
<div id="other">Trigger the handler</div>
JavaScript:
$('#target').keypress(function (event) {
var code = event.keyCode || event.which;
if (code == 13) {
event.preventDefault();
return false;
}
});
$('#target').submit(function (event, data2) {
debugger;
alert('test');
return false;
});
Fiddler: http://jsfiddle.net/ggTDs/
Note that the form is not submited when enter is clicked!
Use below code. 13 for Enter key and 32 for Spacebar.
$("#form_id").on('keydown keyup keypress', function( e ) {
if ( e.keyCode == 13 || e.which == 13 || e.which == 32 ) {
e.preventDefault();
return false;
}
});
I have a textbox with a keydown handler. The handler detects if you press escape and if so it is meant to clear the textbox value. However, calling tb.value = "" normally works, unless the textbox has focus in which case it does nothing. I suspect I have to select the text and delete it, but how? This is in Firefox 12.
Have a look at this:-
LIVE DEMO
HTML:
<input type="text" id="content" />
JS:
$(document).keyup(function(e) {
if (document.activeElement.nodeName == 'INPUT')
{
if (e.keyCode == 13) { // Enter
alert('Enter Key Up');
}
if (e.keyCode == 27) { // Esc
alert('Esc Key Up');
$('#content').val("");
}
}
});