One of my web app's page consists of a grid and a search box. I capture the keypress event to select through each of the grid's rows using the space bar. However, this creates a problem for when someone wants to look up a phrase in the search box.
I know that jQuery has a .focus method to bind an event handler to an input or give focus to an element. But how do I get a boolean value to determine if the search input has focus or not?
try this
if ($("#id").is(":focus")) {
alert('focus');
}
you can find more info on below link :
Using jQuery to test if an input has focus
Like so?
if($('...').is(':focus')){
}
Perhaps:
$(this).is(":focus");
Related
I'm using Angular, Javascript and Typescript and Ionic.
I have a function createDropdown(inputField, arrayOfItems) which will attach a dropdown to the input field being passed populating the dropdown with the array provided.
This will work as a "autocomplete" dropdown, that's why I need a add an event listener "input" so it will look something like this:
createDropdown(inputField, arrayOfItems){
inputField.addEventListener("input",()=>{
//Logic to create dropdown
});
}
The problem is that, after adding the event listener to the input field, if the user spams a key "A" for instance from the keyboard, then this creates lag or delay and eventually the app crashes. Is there a way to prevent this from happening? I have tried "keyup", and it fixes it. However, with this, pressing any key from the keyboard will trigger the createDropdown function, for example: pressing "Control" or "Alt".
The end result should be, having the user typing in an input field, then the results that match should be displayed in the dropdown so the user can select from it. The more they type, the more accurate the results become.
You could use for example setTimeout() + implementation of a spinner.
Here an example for what I mean
https://stackblitz.com/edit/how-to-trigger-an-event-in-input-text-after-i-stop-typingwritin
What you're looking for is called "debouncing input". Take a look here: https://stackoverflow.com/a/36849347/4088472
I can usually determine if a particular input has focus using $("#my_input").is(":focus") but this doesn't seem to work for selectize inputs.
I can set the focus for the input using $("#my_input")[0].selectize.focus() but then still $("#my_input").is(":focus") returns false.
When I inspect the element in Chrome I can see that a div right below my_input has the class attribute focus but it is not clear to me how to link this to #my_input.
I have also tried document.activeElement and document.activeElement.parentElement, etc. but no luck so far
Selectize.js is hiding the input you wrote in your markup and shows some dynamic elements instead.
Those are next to your original input.
Try:
if( $("#my_input").next(".selectize-control").find(".focus").length>0 ){
console.log("Selectize is focussed!");
}else{
console.log("Selectize is NOT focussed.");
}
If you follow me on this... By looking in the "next" div if there is a child having the focus class, you'll know if it's focussed or not..
I have a table which i have made searchable from a JavaScript.
I have set the input valute to Stavanger, but when the page load i need to go to the input field and push enter on my keyboard to execute it.
How can the Stavanger value automaticly be executed when loading the page?
Here are an example to see my problem: https://fiddle.jshell.net/Lpn98e8f/
Regards
You may trigger keyup event using jQuery's trigger function:
Example:
$("#search").trigger("keyup")
Updated fiddle
I'm making a page for a friend and I have a hidden text field and when the user types the text is transposed into a div so that it looks like they're typing on the screen rather than in an input field.
Here is a link to the page: http://merkd.com/godis.php
Here is the function that I use to respond to the key strokes:
$('#hiddenInput').keydown(function() {
var input = $('#hiddenInput').val();
var html = '<div style="float: left;">'+input+'</div><div id="cursor">|</div>';
$('#typingArea').html(html);
});
The text-field is visible right now so that you can see the problem. When text is entered or deleted, it doesn't respond until the next keypress. So if I type a single letter, nothing shows up until I type the next letter.
I looked at the jQuery .on() documentation but I couldn't find anything on this. Any help is much appreciated.
P.S. I know it should be in a separate question, but is there an easy way to make a text-field always in focus? I want to make it so that no matter where the user clicks or whatever, if they type, the text will still show up.
Use .keyup() event because when you first press (keydown), the letter is never typed so the var html is getting previous value. For second part you can bind keypress event in document to focus your input field.
Is there a way to detect when the value of a select list is set to empty by a javasscript and not by the user? It seems that the change-event only triggers by mouse or keyboard.
And is there a way to detect when the number of options in a select list changes (added, removed)?
You have to trigger the change event manually, when you are changing the value of a select with javascript. E.g:
$('#myselect').val(10).change();
In this example the value is set to 10 and the change event is triggered. If there is an event handler attached to the select, it will be executed.
Use Jquery's change function
$("#idofselect").change(function(){ });
To answer your first question, not it's not possible to detect what caused the change in the select list in the change event itself.
However, if there is javascript code changing the select list you could add some logic in there to perform the tasks needed in this scenario.