How can I keep track of changes in SELECT element BEFORE user chooses an item using mouse or by pressing Enter?
One can listen to keyUp event, which allows to track user navigating through the list using keyboard. But is there more generic approach, which allows tracking list "prefinal" changes?
I always use focus click listener for this.
$('select').bind('focus click',function(){
//IMACHANGINGMYOPTION!!!!!!!!!!
//var val=$(this).val();
});
The above should be triggered before the on change event:
$('select').change(function(){
//The option has been changed.
});
Explanation: whenever a user focuses select, we do get the value of the selected item, and we can manipulate it before the onchange event if triggered. The click listener is added in case our select is already focused, and the user clicks it to expand before he actually selects an option and triggers a change.
This is an example of usage, that lets us track the previous value:
http://jsfiddle.net/SUKqS/8/
Javascript supports an 'onbeforechange' event which will probably do the trick, but I don't know how widely implemented this is across browsers? If that is supported widely enough, store the previous value before it is changed. Failing that, just store the original values in hidden fields or JS variables.
there is no event that fires when moving the mouse over the select-items.
you can, as you said, track the mouse movement. But as different browsers render the lists differently, that would be a difficult task.
you can however create a selectbox yourself without using the native select
you have to create a function like this example:-
function example(){
jQuery('select#service_billing_state').change(function () {
//your code here
});
}
and you have to call this function in onchange, onblur, onkey , onfocus...
Related
So I have a simple dropdown in my code that I attach a click hander to, like so (code is technically typescript)
this.highElement.click(() => {
console.log(event);
});
This event is triggered both when I click the select box AND when I click one of the options (Here's a Js fiddle that demonstrates what I mean https://jsfiddle.net/Kolichikov/zmdL6q2d/). What I would like ideally is for the event to only fire when I click the select box itself, not the resulting list of items.
I tried setting a delegated event for the option this.highElement.on("click", "option", () => { console.log("option!"); });, but that didn't work.
I have noticed that the MouseEvent properties are different (the mouse coordinates aren't populated when an item is clicked), but this seems like a browser implementation that could change (maybe?).
Is there a way to properly differentiate between the two events?
I'll give you 2 options, you pick the one it's best for you:
First you can differentiate between the 2 events like this:
$("#selectItem").click(function(event){
if (event.target.id == 'selectItem')
console.log(event)
});
the event has a different target when it returns from clicking in select and from choosing an option.
But I think it would be much clearer if you used the change event
$("#selectItem").change(function(event){
console.log(event)
});
it fires only when you select an item. Depending on what you need this could be better.
EDIT
Checkingwhat #libzz said, I notice that the first part of the above response is wrong. I didn't edit it because the OP accepted the answer as is and I'd be changing the code that lead to his decision.
But as #libzz said, the event when fired has always the same id.
What I also noticed now is that the click event only fires when an option is clicked, not when the select box is clicked. That levels the onclick with the onchange event. They basically do the same thing in this case.
So in order to make code clearer, the best would be using only onchange event for selects.
I have a table with data, and when I click on a cell in a certain column, I want it to change into a select dropdown for the user to choose a category for that row (which will be written to the database by AJAX but that'll come later).
I've done something similar before with text boxes using this, which works great, but I'm not sure if I'm modifying it correctly.
I've created a JSFiddle which shows the problem I'm having. I click on the text and it turns into a select element as expected, but when I click on that to choose an option, the dropdown doesn't stay open and I can't select anything. Debugging has shown me that when I click the dropdown, it runs the $("td.ChooseType").click() routine again so I've tried to suppress that by removing the class then adding it back on on selection, but that hasn't solved it. On the rare occasion that the dropdown stays open, I am unable to select anything by either mouse or keyboard.
All of the users will be on IE8 unfortunately, so I need it to be compatible with that.
Thanks!
You need to use event delegation, as otherwise that click event is always bound to that td - regardless of whether its class changes.
Simply change:
$("td.ChooseType").click(function() {
To:
$("table").on('click', '.ChooseType', function () {
JSFiddle demo.
Purely as an alternative to the accepted answer, you can remove an attached handler with unbind. So instead of adding and removing the class, you could unbind and rebind your handler. Only requirement is that the function can't be in-line, but has to be declared separately.
example: http://jsbin.com/qiqunici/1/edit
var handler = function () {
$(this).unbind('click', handler); //unbind the clicked element only
//create and change the element
//inside the select-change event, instead of addClass, re-attach:
{
//$(this).parent().addClass("ChooseType").text(selected).find('select').remove();
$(this).parent().click(handler).text(selected).find('select').remove();
}
};
$("td.ChooseType").click(handler);
Problem:
I have many drop downs with dynamic changes going on at all times. The problem is I am having to use the blur() method to disable focus so that the class depending on the selected value can be applied.
Is there a way I can set the focus onto the next drop down element.
Tried:
Instead of blur(), I have tried this but it did not work.
this.next(".Element").focus();
Current code:
$('.Element').change(function () {
var colour = $(this).find('option:selected').attr('class');
$(this).removeClass().addClass(colour);
this.blur();
}).change
JS Fiddle:
jsfiddle of my code
try to make this a jQuery object to focus another element
$(this).next(".keyTechElement").focus();
EDIT 1:
Seeing your DOM, changes is needed. The .next() function selects siblings in the DOM and inside <td> there is no .Element sibling.
$(this).blur();
$(this).closest('td').next("td").find(".Element").focus();
http://jsfiddle.net/UXJZ7/2/
I think manipulating focus with focus() or blur() is terrible for keyboard users.
Users also detest auto-tabbing on forms they rarely use.
Onchange doesn't mean a selection has been made, a user could be stepping through the options with the keyboard (or with assistive technology that simulates the keyboard like speech recognition software), you get an onchange event for every step in their selection.
You can get quite elaborate to work around this, but it's rarely worth the effort.
For your example, I'd just leave things like this: http://jsfiddle.net/KWvMZ/ It looks like the only reason you have a focus state in your style is to display the text with sufficient contrast, so I just set the yellow background to have black text when focussed and left it like that.
.
I have an event handler that is executed when an option in a selectbox is clicked.
$('#my-select').live('change', function(evt) {
....
});
Is there a way to pass the status of the Ctrl-key (pressed/not pressed) into the event handler ? evt does not contain this information because all key related attributes are undefined.
change event and the keys used to enter the value
The change event is not something that has keys associated. Please read jQuery's .change() documentation:
The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
The example is this:
You have some input field.
You enter "some name" text into the field.
Before going to some other field, you decide to change it to "some test", eg. by hitting backspace couple times, then you navigate to next field (eg. by using Tab key, or by tapping Next on iOS keyboard etc.),
The onchange event handler is fired, when you navigate to other field (or rather, as soon as the field loses focus), so the information about all keys used to enter value are pretty unrelated.
Solution using keypress event
To solve that problem, you would need to implement your solution using keypress event, eg. thanks to jQuery's .keypress() function. In such case, event object's ctrlKey attribute (listed eg. here) lets you know about the status of the Ctrl key. Example usage is here: https://stackoverflow.com/a/4604093/548696
Demo for saving keys on keypress/keydown/keyup and reading on change
It is available here:
http://jsfiddle.net/tadeck/vPu94/
The demo clears the recorded keys on focus, saves them on every keypress event (you can easily edit that and test different cases) and reads them (and outputs on the screen) whenever change event is fired (so when the changed field leaves focus).
Gist
Which event gets triggered when we select from a dropdown which is populated from the cache ( such as usernames and other form values ) in a <input type="text"> .
Detailed
In a form, we can login with multiple username say A,B,ABC . And the browser caches all these values ( w.r.t password remember ). So,if we try to login with A - a drop down pops up giving multiple option say A , ABC -- which event gets triggered once we select any of the options provided.
oninput, onchange, onblur -- none of which seems to get triggered if we select from browser provided drop down.
Help,
Beginner
You can use these events with select.
Cache has nothing to do with the drop down.
What you need is depending on your use.
Generally onchange is used to get the value or call a function when the value changes.
onblur would trigger a function when the drop down losses focus. eg, when you use tab or other methods.
This question is answered here: On input change event?
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
easily use select event
example:
$('#test').select(function(){ alert('data changed'); });