I'm creating a form with multiple labels, and I used this javascript so I can click on the Enter button (in the keyboard) without jumping into the submit button (in the form), the following is working well but just in 1 label, how can I using it for all the labels without copy & past it changing the label id?
<script>
$(document).ready(function() {
$('#text1').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
document.getElementById("text1").value = document.getElementById("text1").value + "\n";
return false;
}
});
$('#text2').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
document.getElementById("text2").value = document.getElementById("text2").value + "\n";
return false;
}
});
});
...
...
</script>
Since you are binding your key listener to $('#text1') and $('#text2'), it will only listen when your key is pressed while focusing these elements.
You have to bind your listener to a different selector that catches all your inputs, eg.:
$('.form-class input').keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
...
}
});
Related
First time we press keyboard enter key should execute button(id="botonCorregir"). But the second time we press enter key should execute url().
I use cont, for the first time execute one part of the javascript code, and after when de cont value is 1, execute the second part of javascript code.
For some mistake, it doesn´t work.
thanks!
HTML:
<input id="respuestaUsuario"></input>
<button id="botonCorregir">Reply</button>
<a id="enlaceSiguiente" href="nextQuestion.html">Next question</a>
JAVASCRIPT:
<script>
var cont=0;
if(cont==0){
//Should enter the first press of enter
var input = document.getElementById("respuestaUsuario");
console.log('input: ', input)
input.addEventListener("keyup", function(event) {
if (event.keyCode == 13) {
event.preventDefault();
document.getElementById("botonCorregir").click();
}
});
cont++;
}else{
//Should enter the second press of enter
if (event.keyCode == 13) {
event.preventDefault();
document.getElementById("enlaceSiguiente").click();
}
}
</script>
You have a few mistakes in the code.
You are assigning the event based on the value of cont so always will have that functionality. Javascript does not re-interpret the code once the value of cont is changed.
I mean, Javascript check only one time the condition:
if(cont==0){}
This is a solution that works:
var cont=0;
var input = document.getElementById('respuestaUsuario');
input.addEventListener('keyup', function (event) {
event.preventDefault();
if (event.keyCode == 13) {
if(!cont){
alert('uno');
document.getElementById("botonCorregir").click();
cont++;
}else{
document.getElementById("enlaceSiguiente").click();
}
}
});
I guess you were on the right track, but the problem is that your Javascript only gets executed once. So, the else case will never be triggered. I refactored your code to use the check in the event listener:
var cont = 0;
var input = document.getElementById("respuestaUsuario");
input.addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
event.preventDefault();
if (cont == 0) {
cont++;
document.getElementById("botonCorregir").click();
} else {
document.getElementById("enlaceSiguiente").click();
}
}
});
I also created a codepen for you to check out.
I have a multistep form using jquery validator plugin that also goes to the next page when you press enter.
function showPage(pg){
$('formError').empty();
$('table:visible').hide();
$('#page-' + pg).show();
$('input[type="text"]:visible').focus();
}
$(document).keydown(function(e) {
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}});
The issue is that if you use the enter button, it triggers a validation error on the next page because the button is still being pressed and it tries to go to the next page.
How can I ignore the enter key for a small period so that releasing the enter key works to go to the next page without attempting to go to the page after the next page?
You can wait for the corresponding keyup event before taking in account a new keydown event for the enter key.
pressed = {};
$(document).keydown(function(e){
if(pressed[e.which] == null && e.which == '13'){
if($('#msform :input:visible').valid()) {
page++;
showPage(page);
}
}
pressed[e.which] = true;
});
$(document).keyup(function(e) {
pressed[e.which] = null;
});
You can use setTimeout() function like this
$(document).keydown(function(e) {
setTimeout(myFunction(),500);
});
function myFunction(){
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}
}
::::::::::::::::::Update::::::::::::::::::
$(document).keydown(function(e) {
if(e.which == 13) {
setTimeout(myFunction(),500);
}
});
function myFunction(){
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}
}
Currently I use the following code to allow the user to "flip through" content on my web app:
$(this).keyup(function(e) {
if(e.which == 37) {
document.location = $("#prev_button").attr('href');
}else if(e.which == 39) {
document.location = $("#next_button").attr('href');
}
});
The problem is that if the user is in the search form at the top of the page, I do not want the arrow keys to redirect the page (instead they should act as they normally would without the functionality, i.e. allow the text cursor to move around the text).
the form id is "searchForm" - can I add a clause to the the if statement which evaluates to false if the search form is selected?
You can stop the propagation of the event when in the textbox so the event doesn't make it to your other handler:
$('#searchbox').keyup(function(e) {
e.stopPropagation();
});
I would use something like: Demo
$(this).keyup(function(e) {
if(~['input', 'textarea'].indexOf(e.target.tagName.toLowerCase())) return;
if(e.which == 37) {
document.location = $("#prev_button").attr('href');
}else if(e.which == 39) {
document.location = $("#next_button").attr('href');
}
});
This way you can exclude all <input> and <textarea> elements.
IMO, excluding just #searchbox isn't a great solution because in the future you may change its id or include other text fields, but forget you must reflect changes in the exclusion script.
Check out this thread :)
Find if a textbox is currently selected
function checkFocus() {
if ($(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("type") == "textarea") {
//Something's selected
return true;
}
}
I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
i am capturing an event on enter through a selector. but it is not capturing.
var trID;
row.click(function() {
var tr = $(watchRow).find('tr');
$('tr').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
trID = $(this).attr('id');
alert(trID);
});
row.find('trID').keypress(
function(event) {
if (event.keyCode == 13) {
//selfReference.addSymbolToWatch();
alert("You Press Enter!");
}
});
i am getting trID but actually what i want to do is when the row is selected then it is able to trigger an enter event on pressing enter.
You'll need to make the tr focusable by adding the attribute focusable to be able to capture keypresses.
I have tried this and it works as you requested when the 'TR' is selected
$(document).ready(function(){
$('tr').live('keypress',function(){
if (event.keyCode == 13) {
alert("You Press Enter!");
}
});
});