I want to trigger an event like displaying an alert message when I hit the Tab key inside a textbox.
<input type="text" />
$("input").blur(function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
What I want to happen is that whenever I type inside a textbox then hit Tab it will do something.
Im using jquery1.7.2.min.js
I really don't know if Im doing it right.
For the demo http://jsfiddle.net/QfCpC/
$("input").keydown(function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
Fiddle Demo
Will this help
$("input").live("keydown" , function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
http://jsfiddle.net/QfCpC/3/
<input type="text" />
$("input").keydown(function (e) {
if (e.which == 9)
$('#someButton).trigger('click');//or you can directly call the handler also
});
$(document).ready(function() {
$("input").bind("keydown",function (e) {
if (e.which == 9)
alert("Hurray!!!");
});
});
demo here..
http://jsfiddle.net/QfCpC/
In order for the e.which parameter to be set properly, I believe it has to be called from a keydown event.
See the fiddle here. http://jsfiddle.net/QfCpC/2/
Try : http://jsfiddle.net/cEzLL/
$("input").keydown(function (e) {
if (e.keyCode === 9)
alert("Hurray!!!");
});
The reason is when u hit 'tab' two actions takes place
KeyUp for tab button
Blur action for Input type field
Now according to your code you are adding eventlistner to blur event ... and blur event doesn't have property of giving you key binding.
So in order to do this you need to bind "keydown".
$("input").keydown(function (e) {
if (e.which == 9)
alert("YEYYYYYYY!!!");
});
Related
I'm working on my web application using NodeJS, EJS and JQuery. Using JQuery I'am able to detect click event on checkbox but checkbox doesn't appeare checked.
<input type="checkbox" id="myCheck2" class="myClass">
JQuery
function checkboxDefault(){
$("#myCHeck1").attr("checked", false);
$("#myCHeck2").attr("checked", true);
}
$(function() {
$(document).on('click', ".myClass", function (e) {
e.preventDefault();
var event = $(this).attr("id");
if(event == "myCheck1")
$("#myCheck1").attr("checked", true);
else
$("#myCheck2").attr("checked", false);
});
});
I tried using $("#myCheck*").prop, instead .attr() but it doesn't work. Click event and right checkbox ID are rightly detected. Can you help me please? Thanks
prop('checked', true) // to check the box
prop('checked', false) // to uncheck the box
Also #myCHeck1 isn't it a typo?
H is big
I have a textarea where it should not be possible to input line breaks by pressing enter. How can I disable enter in my textarea?
That is the code:
<textarea name="textarea" style="width:250px;height:150px;"></textarea>
Don't forget to use the keydown event instead of the click event
$("input").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
If you use jquery in your web application you can do fallowing trick to disable enter key.
$('textarea').keydown(function(e) {
if(e.which == 13) { return false; }
});
else you can use this
document.getElementById('textarea_id').addEventListener('keydown', function(k){
if(k.keyCode == 13) return false;
});
I hope this will help you!
Use event.preventdefault and next do what you like. For example
<script>
$("textarea").click(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
</script>
I want to allow a function to call by
- button click
- pressing of tab key
For example
$("#editable").keydown(function(e){
if(e.which == 9)
{
alert("hey");
});
Can I use a button to call the function too?
$("#save").click(function (e)
How to do it?
Yes it can be done, you can create a function and the call it on different event handlers:
<button id="myButton"> Click Me </button>
<input type="text" id="myText" />
JS
function myFunction(){
alert("hi!");
}
$(document).ready(function(){
$("#myButton").on("click",myFunction);
$("#myText").on("keydown",function(e){
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
myFunction();
}
});
});
Check out the demo
I have a form with 2 submit buttons, but I want only the second one to be triggered, if I click enter. Unfortunately, the first one is being clicked, what should I do? Is there maybe an attribute to set the main button?
Thanks.
Change the order of the two buttons in the HTML. Then reposition them the way you want using CSS.
To reverse the order of the buttons, you can do:
.buttons input { float: right; }
with the HTML:
<p class="buttons">
<input type="submit" name="second" value="second">
<input type="submit" name="first" value="first">
</p>
This is not possible via HTML. You have to use JavaScript instead.
Example (using jQuery):
<script type="text/javascript">
$(document).ready(function(){
$('#FormId input:text').keydown(function(event){
if ((event.which && event.which != 13) || (event.keyCode && event.keyCode != 13)) {
return true;
}
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
$(this).parents('form').find('#SubmitButtonId').click();
return false;
} else {
return true;
}
});
});
</script>
I'm not sure about HTML tags... But you can write this JS:
<script type="text/javascript">
window.onload = function () {
document.getElementById('button2').focus();
}
</script>
Usually, I prefer to use JQuery and AJAX like so:
$(".TextBoxesClassORAnyOtherSelector").keydown(function () {
if (True) {
$.ajax({
type: "Post",
url: "/relativeAddress/Page.aspx",
data: { Field1: value1 },
success: function (data, status) { // on succeed codes },
error: function (req, status, error) { alert(error); }
});
}
});
I would put the primary button with the type=submit and the other would be managed by javascript (JQuery recommended).
This way when you press enter, since there is only one type=submit button, this one will be used.
Make one button of "submit" type. Hitting Enter should trigger submission regardless of button's relative position to the "reset" button:
<button type="reset">Cancel</button>
<button type="submit">Sign Up</button>
I am developing a webpage using Wordpress 3.04, and I'm experiencing the following issue:
In this webpage, I implemented a script that changes the background image every 10 seconds or so. Now, when users press the Left Arrow and Right Arrow keys, it makes the background picture change back and forth accordingly, and messes up the rotation cycle.
This becomes a problem in the Contact Form section of the site, since users that might need to navigate left and right inside each field might end up changing the background pic instead.
I would also like to disable the "Enter" key, to avoid the form being sent if the users are not done writing their message.
I looked around and found this javascript code that didn't work:
document.onkeydown=function DisableCTRL(e)
{
var val=(document.all)?event.keyCode:event.which;
if(parseInt(val)==17)//CTRL
{
alert('Not Allowed!');
window.event.returnValue=false;
}
}
This JS code didn't work either:
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
Any help will be greatly appreciated. Thanks!
I think, you should call stop() on the passed event, i.e.
document.onkeydown = function(e) {
if (e.keyCode == 17) {
alert('Not Allowed!');
e.stop();
}
};
and maybe use addEventListener(). I am not sure, intercepting the Ctrl key down will actually turn of Ctrl altogether. I guess, you need to intercept cursor left/right with the ctrlKey attribute set. For testing key events, see e.g. http://unixpapa.com/js/testkey.html.
PS. document.all: http://javascript.about.com/od/hintsandtips/a/worst_4.htm
You need to call e.preventDefault() to stop the event from going ahead.. I wrote this function to handle unwanted keys on a site recently:
PreventIllegalKeyPress = function (e) {
if (e.target) t = e.target; //Firefox and others
else if (e.srcElement) t = e.srcElement; //IE
if (e.keyCode == 116) { //prevent F5 for refresh
e.preventDefault();
}
if (e.keyCode == 122) { //F11 leave fullscreen
e.preventDefault();
} else if (e.altKey && e.keyCode == 115) { //Alt + F4
e.preventDefault();
} else if (e.altKey && e.keyCode == 37) { //Alt + left
e.preventDefault();
} else if (e.altKey && e.keyCode == 39) { //Alt + right
e.preventDefault();
} else if (e.ctrlKey && e.keyCode == 82) { //Ctrl + R (reload)
e.preventDefault();
}
if (!(t.tagName == 'INPUT')) {
if (e.keyCode == 13) { //enter
e.preventDefault();
}
if (e.keyCode == 8) { //backspace
e.preventDefault();
}
}};
Note the check for t.tagName == "INPUT". This makes sure that both enter and backspace keys are allowed in input field but no-where else.
Then in $(document).ready, paste the following snippet to call the function:
$(document).keydown(function (e) {
NFS.PreventIllegalKeyPress(e);
});
This works perfectly fine for me.