<input type = “reset” onclick=‘outputx()’>
I want to trigger the button without me clicking on it when the d key is pressed. Output the function and reset at the same time.
You add an event listener to the window. The ASCII code for the letter d is 68.
window.addEventListener("keydown", onKeyDown, true);
function onKeyDown(e){
if(e.keyCode == 68){
outputx();
}
}
First, you have smart quotes “” instead of straight quotes (""). Never use formatted text when coding.
Next, just set up a keydown event handler on the document that checks to see if the d key was pressed:
function output(){
console.log("You did it!");
}
document.addEventListener("keydown", function(event){
if(event.key === "d"){
document.querySelector("input[type='reset']").click();
}
});
<input type = "reset" onclick="output()">
Related
Hello I'm new to this and I have a script that will fire function on keydown. But I also have an input text field box and if I'm typing in that input field box and press the key to that fires the function. The function fires but I don't want the function to fire if I'm typing in the input field would there be a way to do this?
window.addEventListener("onkeydown", keyDown, true);
window.addEventListener("keydown", keyDown);
function keyDown() {
var e = window.event;
switch (e.keyCode) {
case 72: // Key H
test();
break;
}
}
function test() {
document.getElementById('Codefield').value = Math.random().toString(36).substring(2, 15);
}
<input id="Codefield" value="" type="text">
<input id="Codefield2" value="Stop test function keydown or keydown if typeing here" type="text">
If you add event listeners to window, all your inputs will fire the function. Add the event listener only where you need it.
document.getElementById('Codefield').addEventListener("onkeydown", keyDown, true);
Another technique would be to check the e.target from inside the trigger function and ignore the code if it is from an input you don't want to handle.
You can check whether the current element is an input element.
function keyDown(e) {
if (this.tagName == 'INPUT') {
e.stopPropagation();
return;
}
switch (e.keyCode) {
case 72: // Key H
test();
break;
}
}
Also, don't use window.event. That's non-standard and won't work in Firefox. The event is the first argument to the event listener.
Maybe you should use a focus selector (from jQuery):
if($("#Codefield2:focus")) {
thisInput = true;
}
Then add an if statement at the start of your function, and check if thisInput is true or not.
I need to archieve 2 objectives but I archive one at time, never both of them.
First I have an input field that should fires an event when a key is pressed and I need to catch the field value. I use letters, number and the TAB key. So if I use keyup it fires at the first char. If I use keydown it takes 2 char to fire because when it fires the first time the char is not pressed yet. So when I press for the second time it fires with the first letter and so on.
Said that, it is clear that what I need is the keyup event that put the value in the field then the event is fired. But TAB has a special meaning in my case and it is not the default behavior and with TAB key I am unable to catch e.which, e.charCode nor e.keyCode! Only with keydown I am able to get those value!
Now I don´t have a clue what to do. How could I catch TAB key or make keydown catch the value of a field?
P.S keypress also working as keydown. Event is fired before I have the value in the field
EDIT 1:
Here is the code:
$('input[data-action="keyupNome"]').each(function () {
$(this).on("keypress", function(e) {
//Se o campo não estiver vazio
if($(this).val() != '') {
if(key != 9) // the tab key code
{
limpaCamposBusca('nome');
var width = $('#nomeBusca').width();
$('.nomeContainer').css('width', width);
$('.displayNomeTbl').css('width', width);
buscaEndereco('Controller/Dispatcher.php?classe=Buscas&acao=buscaEnderecoPorNome', 'nome');
}//if key == 9
else {
alert('here');
e.preventDefault();
}
}// val == ''
else {
clearFields();
clearBuscaCliente();
reactivateFields();
}
});
});
The trick is to use keydown and to combine actual value of the field with the char currently pressed OR to catch TAB in keydown and set an external variable to be used in keyup as in my example.
EDIT :
In fact, I realized that not preventing default behavior of TAB in keydown doesn't fire keyup. So, no variable is needed, but only preventing TAB on keydown. Anyhow, this version always work if the glitch you talked about exist in some circumstances.
(function() {
var tabKeyPressed = false;
$("#t").keydown(function(e) {
tabKeyPressed = e.keyCode == 9;
if (tabKeyPressed) {
e.preventDefault();
return;
}
});
$("#t").keyup(function(e) {
if (tabKeyPressed) {
$(this).val("TAB"); // Do stuff for TAB
e.preventDefault();
return;
}
//Do other stuff when not TAB
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="t" value="">
I'm trying to create a form, with command which works only if SPACE key is pressed, but in particular input text.
I want that a specific input will be disabled if the user presses on SPACE button inside the input. For example, if the user presses SPACE in First Name input, the input will be disabled.
This is what I've tried so far:
window.addEventListener("keypress", checkKeyPressed, false);
function checkKeyPressed(e) {
if (e.charCode == "32") {
$("input#fn").prop('disabled', true);
}
}
But it works if the user presses SPACE anywhere in the page. My meaning is, if he isn't in the input area and presses SPACE, the FN input is disabled.
I've tried to create a input#fn variable but I don't know how to use it as argument in a function.
Thanks in advance.
Assign the event handler to the input only, not the window:
document.getElementById('fn').addEventListener("keypress", checkKeyPressed, false);
Or jQuery:
$('#fn').keypress(checkKeyPressed);
You might prefer to make use of this in the function, instead of reselecting the input:
function checkKeyPressed(e) {
if (e.charCode == "32") {
$(this).prop('disabled', true);
// or plain JS: this.disabled = true;
}
}
You can try something like this (if you use jQuery):
$('#user_login, #user_pass').on('keydown', function(e) {
if (String.fromCharCode(e.keyCode) == ' ') {
$(this).attr('disabled', 'disabled');
}
});
I have this obfuscated webpage that contains a text-area,
When a user manually inserts text and presses Enter key while editing the text area an event that changes the DOM launches.
I need to pragmatically launch that event,
I know how to get to the text-area itself (using getElementsByName)
and I'm basically inserting text via textArea.value = ''
How do I get that event to launch?
Could you call a function when enter is pressed, and then also just call that function when you want to simulate enter being pressed?
element.addEventListener("keypress", function(event){
if (event.keyCode == 13) {
// Enter has just been pressed.
enterPressed();
}
});
function enterPressed(){
// Do whatever you do when enter is pressed.
}
// Somewhere else off in your code when you want to "trigger" the enter press event:
enterPressed();
is this what you want
document.getElementById("id_of_your_textarea").addEventListener("keydown", function(e) {
if (!e) { var e = window.event; }
e.preventDefault(); // sometimes useful
// Enter is pressed
if (e.keyCode == 13) { document.getElementById("id_of_your_textarea").value = '' }
}, false);
EDIT: based on your comment, you can use the trigger
if you can use jQuery.
$('#textArea').trigger('keydown');
I have to prevent the form submit if the newVal and oldVal are equal. Else I need to execute the Javascript function. - While pressing Enter key from the key board for the dynamically generated textboxes.
For this case, While pressing enter key the alert is coming repeatedly.
ie, first time one alert. Two alerts for second time.And the expected result is not getting.
What is expected: If I enter a value equals to the curValue then form doesn't have to submit.Else need to call the function myFun(); What is wrong with me?
function pressEnter(id,newValue,i)
{
var newId = '#'+id;
$(newId).keydown(function(event) {
var curValue= '<%=currentVal%>';
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert(newValue+"-"+curValue);
if(newValue== curValue)
{
event.preventDefault();
}
else
{
myFun(i);
}
}
});
}
You have to unbind previous keydown handler:
$(newId).off('keydown').keydown(function(event) {...});
You can do this comparison on form submit event rather than pressing enter key. Because user can use mouse and click the submit button.
Restrict user on form submit as follows,
$("#your_form_id").submit(function() {
var newValue = $(".your_textbox").val();
var curValue= '<%=currentVal%>';
if(newValue== curValue)
{
event.preventDefault();
//Or use return false;
} else{
myFun();
}
});
Here, we can avoid unwanted bind and unbind operations.
And we can achieve this on enter press, just write without function as follows,
$("#your_text_box_id").keydown(function(event) {
var newValue = $(".your_textbox").val();
var curValue= '<%=currentVal%>';
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert(newValue+"-"+curValue);
if(newValue== curValue)
{
event.preventDefault();
}else{
myFun();
}
}
});
Note: If you scope this jQuery code within a function,then javascript add handler for same event on every function call. Result is your code(Code in "keydown" callback) run multiple time. To avoid you have to unbind the event.