Here's my code to make txtKeyword input to have focus when the user presses a key.
var txtKeyword = document.getElementById("txtKeyword");
...
document.addEventListener("keypress", function(event) {
if(event.srcElement == txtKeyword)
{
return;
}
txtKeyword.focus();
}
I need to compare the elements to know if the message sender is the element on which I want to focus fail.
event.srcElement == txtKeyword
event.srcElement.id == "txtKeyword"
event.srcElement === txtKeyword
These comparison which is faster?
Considering id is a string, if the element's id is long, this way would not a ideal way.
My guess is that the last one should be the fastest because it doesn't do any coercion.
Related
I am doing an experiment and I want a part to be shown if a certain key ("b") is pressed and skipped, if any other key is pressed. The key that is pressed is saved in key_resp_3.keys and if I visualize what's saved in the key_resp_3.keys variable it's simply b.
So I thought this would be the right comparison:
if ((key_resp_3.keys != "b")) {
continueRoutine = false;
}
However in this case, the routine is always skipped so somehow "b" is obviously not the way the key is saved in the key_resp_3.keys variable. Does anyone have an idea what is the right comparison instead?
Thank you!
Hard to tell the root cause of the problem without the rest of the code. But you can simply use an event listener like below
document.addEventListener('keydown', function(event) {
console.log(event.key)
const key = event.key
if(key == "b")
alert("b presed")
});
Or can it be as simple as you are trying to set const key_resp_3 = event.key then checking in the if key_resp_3.keys so you are trying to access variable.key.key
In this special case:
since the keys is a array you can use
Does contains b
key_resp_3.keys.includes('b')
Does not contains b
!key_resp_3.keys.includes('b')
I need to detect any "#"-inputs into a textfield but have no idea how to get that information as two keys have to be pressed to write the #-sign.
And I don't even know if these keys are the same in every country so basically I'm asking if there's a way to check the last typed character (without checking the keys).
Pretty simple:
const input = document.getElementById('input');
input.addEventListener('keydown', function(e) {
if (e.key === '#') alert('# typed!');
})
<input type="text" id='input'>
The typed character is stored inside event.key property passed to the event handler.
I have two inputs: the first one is X - file upload. the second one is Y- an input for an URL.
So far I have a code that checks if Y is valid then remove the attribute required for X. otherwise I want the X to be required.
$(Y).blur(function(){
if ($(this).is(':valid') == true) {
$(X).removeAttr('required')
} else if ($(this).is(':valid') == false) {
$(X).attr('required');
}
});
for some reason this code works when the input Y is valid it removes the attribute. But let's say the user regrets and wants to leave Y blank, it doesn't return the required attribute for X.
Tried to keep the explanation as simple and clear as possible. If there is a misunderstanding I'll try to edit this question and make it clearer.
The easiest way is:
$(Y).blur(function(){
if ($(this).is(':valid') == true && $(this).val() != '') {
$(X).removeAttr('required')
} else if ($(this).is(':valid') == false || $(this).val() == '') {
$(X).attr('required');
}
});
In that case when user removes the content, required attribute will be returned back (dont forget to add trim function, I didnt use it in the sample).
I would recommend to capsulate this logic into validation functions. I also dont like blur event (usability is bad), I would recommend onchange event for field validation.
I am creating a conversion web app to teach myself Javascript. The user can input data with a number pad (basically a calculator without the operators). I also set up a function to detect keystrokes (1-9) which insert data just like the number pad. And also character 'c' which clears all data
My problem is that I also have a search field (which uses auto complete to enable the user to search for other conversions). I dont' want the user to search for something using the 'c' or number keys, and have it enter data into both the number pad, and search field.
My idea was to create a if statement to determine if the search field was active (focused), and if it was to change a variable (enabled) to false, thus disabling the keystroke detection.
The problem I am having is that the function holding the if statement with the focus attribute is not working.
If my rambling made no sense hopefully the code will clear things up.
Here is the if statement with the focus attribute
$(document).ready(function(){
if($(':focus').attr('#searchInput') == 'input')){
enabled === false;
}
});
Here is the code for key stroke detections (I omitted the redundant parts to save space
document.onkeydown = function(event){
var key = event.charCode || event.keyCode;
if(enabled === true){
if(key === 67){
clearInput(input); //Clears form input (input is my form ID)
}else if(key === 48){
writeInput(input, zero); //Zero is a var equaling 0
}
...
}else{
return false; //if enabled is false don't detect keystrokes
}
};
Any help would be greatly appreciated. If anything doesn't make sense I will be happy to explain (or edit the post.)
$(document).keyup(function(e){
if($('#searchInput').is(':focus')) {
return ; // search field is focused, ignore other part of function
}
var key = e.which;
// do your code here
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript event handler on body but not on input
I wrote a short script that listens the keydown event, but i'd like to ignore it if i'm writing in a text field.
I have no idea about how to do it without strange tricks, like checking if there is a focus on one of the inputs.
Here is my code right now.
document.addEventListener('keydown', function(event) {
if(event.keyCode == 71) {
showSelected();
}
else if(event.keyCode == 13) {
closeModal();
}
});
This is a little tricky if you're doing things with contenteditable (like letting users write text inside of any divs/spans/boxes they want to on the page).
If so, this will take a little thinking and reworking (it's not that hard - just more involved).
However, you can check the event.target (element the event's happening on) for its tagName property, against a list of types you want to exclude.
function keyEvent (evt) {
var key = evt.keyCode,
el = evt.target,
type = el.tagName.toLowerCase();
// tag names are upper-case... almost always...
// so convert one way or the other, to be sure
if (type === "input" || type === "textarea") { return; }
/* do whatever you were going to do */
}
Should also likely be noted that this solution (and your code thus-far) aren't ghetto-IE compatible.
For that, you'd need to work with attachEvent and the window.event and window.event.srcElement properties, because they don't support addEventListener and the e/event function-parameter.
just check for the event.target
{
if (event.target.tagName.toUpperCase() == 'INPUT') return false;
// Do your Coding
}