VB.NET: How to execute jquery code when pressing enter in textbox - javascript

I have an issue where I'm trying to execute a search query from a textbox and attempting to use enter to initiate the search; however, it doesn't seem to be working. I'm wondering if vb.net/asp.net is doing a postback or something that I'm not aware of.
ASPX Page
<form class="navbar-search">
<input id="searchbox" type="text" class="search-query span3" placeholder="Search" />
<div class="icon-search"></div>
</form>
JQuery
$('#searchbox').keyup(function (e) {
//alert("this will execute");
if (e.which == 13) {
alert("this will not execute");
//window.location.href = "http://www.google.com/";
}
});
I can't get the alert box to execute or the change location to work... if anyone can help I appreciate it.

Try this:
$("#searchbox").keypress(function (e) {
//alert("this will execute");
var code = e.keyCode || e.which;
if (code == 13) {
alert("this will not execute");
//window.location.href = "http://www.google.com/";
}
});
and to stop page from refreshing on-enter use this:
$(document).keydown(function (e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
}
});
FIDDLE

Please try this.
$("#searchbox").live("keyup", function(event) {
if (event.keyCode == 13) {
//window.location.href = "http://www.google.com/";
}
});
This was worked for me...

Related

JQuery keypress special buttons issue

I am working about press the key of insert on the my page , but i have any error about keycode of insert.
$(document).on('keypress', function(e) {
var code = e.keyCode || e.which;
console.log(code);
if(code===45){
alert("Insert Clicked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
this is my code . When i clicked some key it work fine , but when i press insert,tab,del,backspace,shift it doesn't work. There is any mistake ? I didn't find any mistake.
You can use keydown with e.preventDefault();:
$(document).on('keydown', function(e) {
var code = e.keyCode || e.which;
console.log(code);
if(code == 45) {
e.preventDefault();
alert("Insert Clicked");
}
});
Try the following code
$(document).on('keydown', function(e) {
var code = e.keyCode || e.which;
console.log(code);
if(code===45){
alert("Insert Clicked");
}
});
Here is the working jsfiddle: https://jsfiddle.net/t5458erd/

how do I call function when the user presses enter on the input

I want call function when the user presses enter on the input.
<input type='text' id='name'></input>
I found this code but it doesn't work.
$("#name").bind('keypress', function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
Did you include the JQuery library? Your code appears to work fine in Chrome.
You could also do:
$("#name").keypress(function(e) {
if(e.keyCode == 13) {
alert('You pressed enter!');
}
});
JSFiddle: http://jsfiddle.net/dMt55/
Non Jquery version:
document.getElementById('name').onkeypress = function(e) {
if(e.keyCode == 13) {
alert('You pressed enter!');
}
}
Please try this;
<input type='text' id='name' />
$("#name").bind('keypress', function(event) {
if (event.keyCode== 13) { //Enter
// your code
}
});
You can wire up your own custom event
.Try this
HTML
<input type='text' id='name'></input>
Jquery
$('#name').bind("enterKey",function(e){
//do stuff here
});
$('#name').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
http://jsfiddle.net/x7HVQ/

Disable enter submit

I have a form with a textfield inside and I am trying to disable the default behavior when the browser submits the whole form if the user presses Enter while the textfield is selected.
$('#recaptcha_response_field').keydown(function(event) { if (event.keyCode == 13) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
alert("You Press ENTER key");
return false;
}
});
Currently am getting "You Press ENTER key" and the default behavior isn't overridden.
Try this:
$(document).on("keypress", 'form', function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
This will prevent the form submit on keypress
DEMO HERE
I found this and it works for me.
<input type="text" name="somename" id="someid" value="" onkeypress="return event.keyCode!=13">
To prevent the script from blocking the enter key on other elements such as on a textarea. Change the target from "form" to "input".
$(document).on("keypress", "input", function (e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});
If none of the above solution is working for you , and you are using javascript anyway , why don't you use button type as 'button' <input type='button'> and submit it using javascript
$('#form_id').submit();
U can use this script to prevent enter on entire from.
<script type="text/javascript">
$(document).on("keypress", 'form', function (e) {
if (e.target.className.indexOf("allowEnter") == -1) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
}
});
</script>
you put the classname to which control need to use enter

Prevent Form submitting and hitting keyup event handler not working

Having some problem cross browser. I need to Support IE7-9, my site is set to IE7 standards - cannot be changed. Then i need to support latest chrome, safari and firefox.
I want to hit a keyup event in a textbox on enter. Problem is i have a keypress event added to the form on that page which is submitting the form which i dont want to happen.
Sample application would be like this.
JAVASCRIPT:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
//if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
});
$("#myInput1").bind("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});​
HTML
<li onkeypress="alert('hi')">
<input id="myInput1" type="text" />
<div id="log1"></div>
<div id="log2"></div>
</li>
If i use e.preventDefault() - keyup event is not hit, if i dont use it, page is posting back.
I want to see "Key up - Enter pressed - input event" to be written to screen on pressing enter, across all browsers.
Any help would be appreciated. Thank you.
Finally was able to do it like this:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (e.keyCode != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
e.stopPropagation();
sampleE = e.keyCode;
$("#myInput1").trigger("keyup");
return false;
});
$("#myInput1").bind("keyup", function (e) {
if (!e.keyCode)
e.keyCode = sampleE;
if (e.keyCode != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
var sampleE = null;
I know this is not the best of the options but this is working. Thanks All.

Stopping enter key submitting also stops enter key in multi line text edit

There are lots of solutions on the web for stopping the enter key from submitting a form. Most commonly to use <body onkeypress = ...
But these seem to have the undesired side effect of stopping the enter key working in a multi-line text box. Does anyone know of a way around this, so the enter key will still work in a multi-line text box?
Thanks,
AJ
<script language="Javascript">
document.onkeydown = function() {
if (event.keyCode == 13) {
if (document.activeElement.tagName.toLowerCase () != "textarea") {
event.preventDefault();
return false;
}
}
}
</script>
Something like this?
You can try the following (with jquery):
$(function(){
$('input:not(textarea)').live('keypress', function(e) {
if (e.which == 13) return false;
if (e.which == 13) e.preventDefault();
});
});
Only input fields are targeted, not textareas.
NON JQUERY
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode;
else
key = e.which;
return (key != 13);
}
And add onKeyPress on all text inputs
<input type="text" name="textIn" onKeyPress="return disableEnterKey(event)"/>
Ref : http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

Categories